Как сделать так, чтобы путь к изображению, полученный из mongodb, работал в проекте React? - PullRequest
Новая
       33

Как сделать так, чтобы путь к изображению, полученный из mongodb, работал в проекте React?

0 голосов
/ 05 мая 2020

Я сохранил путь к изображению в mongodb, и теперь, когда я использую его в качестве источника изображения, изображение кажется сломанным.

В контроллере загрузки я создаю сообщение со свойством аватара, которое создает путь к изображению:

выгрузка. js 

exports.uploadAvatar = async (req, res) => {
    const url = `${req.protocol}://${req.get('host')}`; 
    const { title, content } = req.body;

    const newPost = new Post({
        title,
        content,
        avatar: `${url}/client/src/uploads/${req.file.filename}`,
    });

    await newPost.save((error, post) => {
        if (error) {
            return res.status(400).send({
                status: false,
                message: error,
            });
        }

        res.status(201).json({
            message: 'File is uploaded.',
            post: {
                avatar: post.avatar
            }
        });
    });
};

В маршрутах я передаю промежуточное ПО multer для загрузки контроллера Avatar, а также делаю конфигурации multer:

маршруты. js

const multer = require('multer');
    const { uploadAvatar } = require('../controllers/upload');

    const FILE_PATH = 'client/src/uploads';

    const storage = multer.diskStorage({
        destination: (req, file, cb) => cb(null, FILE_PATH),
        filename: (req, file, cb) => {
            const fileName = file.originalname.toLowerCase().split(' ').join('-');
            cb(null, `${Math.floor(Math.random() * 10000)}-${fileName}`); 
        },
    });

    const upload = multer({storage: storage});


    router.post('/upload-avatar', upload.single('avatar'), uploadAvatar);

Затем в приложении. js Я получаю сообщение и заполняю переменную состояния profileImg путем указания пути к изображению, из Свойство аватара объекта mongodb.

Приложение. js

export default () => {
    const [profileImg, setProfileImg] = React.useState([]);

    React.useEffect(() => {
        axios.get(`http://localhost:8080/api/get-avatar`)
            .then(res => {
                setProfileImg(res.data.posts[0]);
                // console.log(res.data.posts[0])
            })
    }, []);

    return (
        <div className="avatar">
            <img src={profileImg.avatar} />
        </div>
    );
};

документ mongodb 

{
    "avatar":"http://localhost:8080/client/src/uploads/5914-irina.jpg",
    "title":"Lorem Ipsum",
    "content":"ed ut perspiciatis unde omnis iste.",
}

Структура проекта 

client
    public
    src
        uploads
            // my image
        App.js
        index.js
controllers
models
routes
server
pachage.json

Проблема в том, что изображение в компоненте реакции не отображается, и в консоли я получаю эту ошибку: 

GET http://localhost:8080/client/src/uploads/some-image.jpg 404 (Not Found)

Ответы [ 2 ]

1 голос
/ 05 июня 2020

Я столкнулся с той же проблемой. Я решил это очень просто, хотя не уверен, идеальный это способ реализации или нет. Согласно реакции, каталог root начинается с publi c и для рендеринга любого динамического c изображения это изображение должно храниться в папке publi c. Поэтому я сохранил изображения в папке "client / public / images" .

, поэтому мое изображение sr c было таким 

<img src={`http://localhost:3000/images/${imageName}`} alt=""/>
0 голосов
/ 05 мая 2020

Переместите папку uploads в папку public, затем измените URL-адрес вашего аватара следующим образом: 

{
   "avatar":"/uploads/5914-irina.jpg",
}

или 

{
   "avatar":"http://localhost:8080/uploads/5914-irina.jpg",
}
...