javascript - 如何将来自 axios 调用的图像显示到 Vuejs img 元素中？我没看到任何有用的东西

Question

我见过很多实现此目的的方法。我最初想存储图像并将其从我的数据库调用到 View ，但我不确定我应该将它存储在哪里以及调用它的正确方法 (:src="prizes.image_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
}

getPrizes() {
  axios.get('http://localhost:3000/prizes').then(response => {
    this.prizes = response.data
    console.log(response.data)
  })
}

<div v-for="prize in prizes" :key="prize.id">
   <div class="card_individual">
      <div class="card-media-container">
         <img class="card_image" :src="prize.image_url" alt="instruments"/>
      </div>
      <div class="card-detail-container">
         <div class="card_title">Win a {{ prize.name }}</div>
      </div>
      <div class="modal-footer">
         <router-link :to="{ name: 'PriceDetail', params: { prizeId: prize.id }}"><button type="button" class="btn btn-primary">{{ cards.btn_text }}</button></router-link>
      </div>
   </div>
</div>

Answer 1

简答

将所有图像放在 assets 目录(或子目录)中。仅将文件名存储在您的 JSON 中，如 image_url: "c5Cor.png" 并显示为:

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

其他意见

Webpack 捆绑了 assets 文件夹，它重命名了内容的路径/文件名。所以这就是为什么需要 require 的原因——当将 src 绑定(bind)到一个变量时——以在运行时获得正确的路径。

当您说客户端/服务器时，您可能指的是前端/后端。这些是不同的，因为前端和后端资源都是从服务器提供的。例如，“图像存储在客户端”这一说法:除非您将图像存储在 localStorage、indexedDB 等中，否则是不准确的。将图像存储在 Vue 的 assets 目录中是服务器端前端。数据库将是服务器端后端。

因此，除非您打算询问有关在 localStorage 中存储图像的问题，否则更好的措辞可能是“我应该将图像存储在数据库中还是作为文件？”。在典型的网站上，您会将图像存储为文件，并仅将文件名存储在数据库中。 (可以将原始图像的二进制数据存储在数据库中——一个 blob——并且有 some debate 关于何时这是一个好主意，但在典型的网站中它可能在统计上很少见。)将它们存储为文件更容易.