如何从我的后端服务器动态绑定图像答案

【问题标题】：How to Dynamically bind an image from my backend server如何从我的后端服务器动态绑定图像
【发布时间】：2020-03-27 13:22:18
【问题描述】：

我目前正在使用 Vue js 并尝试动态绑定从数据库中获取的图像。我得到了我的路径，但图像没有显示出来。我的前端在 localhost:8080 上，后端在 localhost:3000 上。

在我的 app.js 文件中，我将公用文件夹建立为静态目录，在该文件夹中，我有我的上传目录，这是我的图像被发送到的位置。

app.use(express.static(path.join(__dirname, 'public')))

我正在通过 multer 发送我的图像：

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './public')
  },
  filename: function (req, file, cb) {
    cb(null, new Date().toISOString() + file.originalname)
  }
})

这是我如何看到图像的源代码在检查器上弹出的示例。

src="public/uploads/2020-03-27T12:16:43.535Zaaa.jpeg"

我希望能够在我的组件中动态显示它们，但图像没有显示出来。我也在使用 Vuex 并将它们存储在我的状态中的一个对象中。

【问题讨论】：

标签： image express vue.js path vuex

【解决方案1】：

我认为您应该使用完整地址访问您的图像

src="http://localhost:3000/uploads/2020-03-27T12:16:43.535Zaaa.jpeg"

【讨论】：

谢谢，成功了。我想我没有添加http，这就是问题所在。知道我以后如何在生产中使用它吗？
如果您将前端和后端部署在同一台服务器上，可能只使用“/uploads/image.jpg”，但如果将它们部署在两台单独的服务器上，则需要使用完整地址“yourserver.com/uploads/image.jpg”