如何让从mongodb获取的图片路径在react项目中工作？

Question

我保存了一个图片路径到mongodb，现在当我把它作为图片源在react中使用时，图片出现了破损。

在uploads控制器中，我创建了一个有avatar属性的帖子，该属性创建了图片的路径。

upload.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中间件传递给uploadAvatar控制器，并进行multer配置。

routes.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);

然后在App.js中，我得到了帖子，并将来自mongodb对象avatar属性的图片路径填充到profileImg状态变量中。

在App.js中，我得到了帖子，并将来自mongodb对象avatar属性的图片路径填充到profileImg状态变量中。

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)

Answer 1

移动 uploads 文件夹到 public 然后把你的头像网址改成这样

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

或

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

Answer 2

我也面临同样的问题，我用一个非常简单的方法解决了这个问题，虽然我不知道这个方法是否完美。我用一个非常简单的方法解决了这个问题，虽然我不知道这是否是一个完美的实现方式.根据react的规定，根目录从公共目录开始，对于渲染任何动态图像，该图像应该保存在公共文件夹中。所以我把图片保存在 "clientpublicimages" 文件夹。

所以我的图片来源是这样的

<img src={`http://localhost:3000/images/${imageName}`} alt=""/>