Javascript 如何将axios调用中的图像显示到Vuejs img元素中？I'；我没有看到任何有效的方法

我见过很多这样做的方法。我本来想存储图像并将其从数据库调用到视图，但我不确定应该将其存储在哪里以及调用它的正确方式（

：src=“奖品.图像\u url”

）

映像存储在客户端

{
    id: 2,
    name: "Merano MC400 Cello",
    description: "Established in 2000, Merano have made it their mission to create affordable, beautifully crafted instruments. They offer brass, wind and stringed instruments all at reasonable prices. They have a large team of artisans who look over every instrument to ensure it maintains high standards. Many of their instruments are aimed at the beginner market but they also offer some fine examples of professional equipment as well.",
    image_url: "../assets/images/c5Cor.png",
    quantity: 3
}

get奖品（）{
axios.get（）http://localhost:3000/prizes）。然后（响应=>{
this.prices=response.data
console.log（response.data）
})
}

赢得{prize.name}
{{cards.btn_text}

简短回答 将所有图像放在

资产

目录（或子目录）中。仅将文件名存储在JSON中，如

image\u url:“c5Cor.png”

并以如下方式显示：

<img :src="require('@/assets/' + prize.image_url)" />

其他评论 Webpack捆绑资产文件夹，该文件夹重命名内容的路径/文件名。这就是为什么在将

src

绑定到变量时需要

require

，以便在运行时获得正确的路径

当你说客户机/服务器时，你可能指的是前端/后端。这些是不同的，因为前端和后端资源都是由服务器提供的。例如，此语句“映像存储在客户端”：除非您已将映像存储在

localStorage

中，

indexedDB

等中，否则该语句是不准确的。将图像存储在Vue的

资产

目录中是服务器端前端。数据库将是服务器端后端

---

因此，除非您打算询问如何在

localStorage

中存储图像，否则更好的措辞可能是，“我应该将图像存储在数据库中还是作为文件？”。在一个典型的网站上，您可以将图像存储为文件，并在数据库中只存储文件名。（可以将原始图像的二进制数据存储在数据库中——一个blob——这是一个好主意，但在典型的网站中可能在统计上很少见。）将它们存储为文件更容易。

查询img并将其分配为blob：

赢得{prize.name}
{{cards.btn_text}

get奖品（）{
axios.get（）http://localhost:3000/prizes')
.然后（response=>（this.prives=response.data）
},
getImageBlob（图像url）{
返回axios.get（image\uURL）.then（response=>window.url.createObjectURL（response.data））
}

---

同样，如果您想将其存储在数据库中，您也可以将

响应。数据

存储在数据库中。

您是否可以包括组件的其余部分，特别是组件的初始化以及调用

getPriories

的部分？您是否询问如何将图像存储在数据库中，或者如何显示该im您的Vue组件是否老化？@EmielZuurbier好吧，我数据库中存储的其他项目都很好，但我不知道应该将图像存储在客户端还是服务器端。还有，如何显示它们。图像本身存储在我假设的错误位置？图像应该存储在服务器上，因为它们将被删除N在需要时加载到客户端。现在，您的本地主机起到服务器的作用，并从那里检索图像。数据库可能有一条指向图像URL的记录，但图像本身不会存储在那里。当您调用

get奖品

时，模板是否正确地重新呈现（图像除外）？@EmielZuurbier是的。其他一切都呈现得非常完美。我尝试在服务器/公共/图像中存储图像，但没有成功。尽管我想知道我是否弄错了路径…这正是我的意思。谢谢你为我澄清这一点，这对我来说总是有点困惑。我假设“资产”目录将是服务器端后端而不是前端？不客气。

资产

和所有可视化、交互式元素构成前端。后端通常指主机操作系统和技术，包括web服务器（节点、Apache等）、数据库和任何服务器端计算（也包括节点、PHP等）这不是即时的互动。我正在即兴创作这些定义，我相信还有更好的定义。