如何在 Vue 应用程序上显示来自快递服务器的图像？答案

【问题标题】：How can I show image from express server on Vue app?如何在 Vue 应用程序上显示来自快递服务器的图像？
【发布时间】：2021-10-29 04:34:18
【问题描述】：

我目前在显示来自 db 的图像时遇到问题。在我的数据库（Sequelize MySQL）中，我的列看起来像这样。 Database

您可以看到有路径，它显示了服务器上文件的路径。（快递服务器使用multer上传照片）。

我怎样才能在我的前端显示这个？我正在尝试一切，但我无法找到解决方案。当我打开我的服务器文件夹并在那里复制文件路径时，我得到这样的路径： Path 当我把它放在 chrome 中时，我可以看到那个图像，但是当我尝试在前端显示它时，我就没有那么幸运了。

这是我在后端获取图像的函数。

async getOneImage (req,res){
    try{
        const getOneImage = await CaseImage.findOne({ where: {CaseId: req.params.CaseId, id: req.params.id}});

        if (getOneImage == null) {
            res.status(400).send({ message: 'Prípad so zadaným ID sa nenašiel.' });
        }

        res.send(getOneImage);
    }
    catch (err) {
        console.log(err);
        res.status(400).send({ message: 'Nepodarilo sa načítať fotografie, skúste to neskôr.'});
    }
},

也许我应该将该响应更改为二进制或？如您所见，我不太清楚这个主题。

感谢大家的帮助，如果问题的格式或命名不正确，我们深表歉意。

好的，所以我尝试了，现在我向节点服务器发出请求，但我得到响应 404 无法获取...所以我假设问题出在我的快速设置中...

this.imageSrc = http://localhost:3000/${data.path}.png

这是完整的 url.. 但响应是 404。

http://localhost:3000/static/uploads/70e13f7cd5e6a3d0a0d0bc252d62fa31.png

编辑。

所以，这是我的前端.. 你可以看到我正在向正确的路径发送响应。 frontend request

在这里你可以看到我的 express 后端设置是什么样子的。 Express

这是我向后端发送请求时得到的响应。 Response

但我仍然无法在 vue 中看到图像。当我检查时，我只看到空白，在控制台中是这个回复：

“获取 http://localhost:3000/static/uploads/70e13f7cd5e6a3d0a0d0bc252d62fa31.png 404（未找到）”

在网络标签中是这个。 Network tab

【问题讨论】：

您能说明如何从您的前端部分调用后端吗？
您返回的 json 不是实际图像，您需要通过<img :src="image.path"/> 标签从路径加载图像，或者使用 fs 加载实际图像，然后通过管道等快速发送并发送返回，然后使用<img src="/path/to/the/route"/>
这是我对后端的调用.. [链接] (pastebin.com/qcPwkmwb).. 现在我可以看到一个大问题并且我请求的数据库错误。当图像不是案例时，我应该请求数据库..

标签： mysql node.js image vue.js express

【解决方案1】：

所以你有了这个静态文件夹。

如果您尚未使用 express 提供此静态文件夹，请参阅explanation 了解如何提供静态文件夹。

在前端获取图像后，您将拥有一个类似这样的图像对象：

{
     "id": 1,
     "fileName": "problem.png",
     "mimeType". "image/png",
     "caseId: 2,
     "path": "static/uploads/abcdefg.......png"
}

您的 html 文件中的 img 标签应如下所示。

<img src="http://localhost:{PORT_OF_EXPRESS_SERVER}/static/uploads/abcdefg.........png"/>

因为你使用的是 vue.js，所以这里是一个 axios 的例子。

MyComponent.js


import axios from 'axios';
export default {
    data: () => {
         return {
              imageUrl: ''
         }
    },
    mounted(): async () => {
         // this route here must match what you defined in your backend
         const { data } = await axios.get('/image/2/5')
         console.log(data);
         /** {
             "id": 1,
             "fileName": "problem.png",
             "mimeType". "image/png",
             "caseId: 2,
             "path": "static/uploads/abcdefg.......png"
             } **/

         // now we set the imageUrl, assuming your express port is 1337
         this.imageUrl = `http://localhost:1337/${data.path}`; 
    }
}

我的组件.html

<template>
    <div id="my-component">
         <img :src="imageUrl"/>
    </div>
</template>
<script src="./MyComponent.js"></script>

【讨论】：

感谢您的回复！.. 在我的 server.js 中，我有这个：app.use(express.static('public')); ..当我发送请求时。后端获取一张图片，我得到以下响应： { caseId: 1 createdAt: "2021-08-20T09:39:07.000Z" fileName: "problem.png" id: 33 mimeType: "image/png" path: "static /uploads/70e13f7cd5e6a3d0a0d0bc252d62fa31" updatedAt: "2021-08-20T09:39:07.000Z" }.. 但是当我使用你发给我的 img 标签时，我仍然得到 res 404 not found..
localhost:3000/static/images/photo.png" />

【解决方案2】：

如果您在数据库中拥有正确的图像路径，您只需使用标签渲染它们。确保文件的路径完整，或相对于您的静态资产文件夹。

在您的情况下，路径似乎是 static/uploads/hash 和文件名问题.png 的某种混合。

这意味着文件的完整 url 很可能是这样的：

domain.com/static/uploads//.png。 domain.com 部分很可能是 localhost：如果您在本地工作。在生产服务器上，这将是您托管应用的域。

PS。您的第二张图片是系统上的完整文件路径，这在服务器上不可见。

【讨论】：