node+express使用multer上传的图片怎么让前端显示？

Question

做了一个前后端分离的文件上传 前端使用react+antd的upload组件实现上传功能，后端使用node+multer，图片上传成功了，也存到数据库里了但是前端无法显示
前端代码

<div className='avatar-relative'>
          <Upload
            name='avatar'
            onChange={handleAvatarChange}
            showUploadList={false}
            action='/api/users/update-avatar'
            className='upload-avatar'
            data={{
              id,
            }}
          >
            <EditOutlined className='edit-logo' />
          </Upload>
          <Avatar size={100} icon={<UserOutlined />} />
          <img src={`${user.avatar}`} alt='avatar' />
        </div>

后端代码

var express = require('express')
var router = express.Router()
const multer = require('multer')
const userController = require('../controllers/users')

const upload = multer({ dest: 'public/avatars/' })

router.post(
  '/update-avatar',
  upload.single('avatar'),
  userController.updateAvatar
)

updateAvatar: async (req, res) => {
    const { file } = req
    const avatarUrl = `/public/avatars/${file.filename}`
    const { id } = req.body
    try {
      const data = await userServices.updateAvatar(avatarUrl, id)
      if (data[0]) {
        res.send(sendData(true))
      }
    } catch (error) {
      res.status(500).send(sendData(false, error.message))
    }
  },

上传成功后在本地文件显示为这样

数据库里

显示在页面上

Answer 1

很明显上传成功，存储成功，但是你本地使用的时候，用的是相对路径，所以浏览器会去前端项目的路径里找图片，当然是找不到的。

解决方案就是使用后端的路径。或者通过某种方式进行映射也可以，看你准备怎么部署。