您如何将来自axios调用的图像显示到Vuejs img元素中？我什么都没看到

Question

我已经看到了很多方法。我原本想存储图像并从数据库中调用它到视图，但是我不确定应该在哪里存储图像以及调用它的正确方法（: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绑定到变量时-在运行时获取正确的路径。

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

因此，除非您打算询问是否将图像存储在localStorage中，否则更好的措词可能是：“我应该将图像存储在数据库中还是作为文件存储？”。在典型的网站上，您会将图像存储为文件，而仅将文件名存储在数据库中。 （可以将原始图像的二进制数据存储在数据库中，即斑点，some debate表示什么时候是个好主意，但是在典型的网站上从统计上讲是很少见的。）将它们存储为文件更容易。

Answer 2

查询img并将其分配为blob：

<img class="card_image" :src="getImageBlob(prize.image_url)" alt="instruments"/>

  <div v-for="prize in prizes" :key="prize.id">
    <div class="card_individual">
      <div class="card-media-container">
        <img class="card_image" :src="getImageBlob(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>

  getPrizes () {
    axios.get('http://localhost:3000/prizes')
      .then(response => (this.prizes = response.data)
  },
  getImageBlob (image_url) {
    return axios.get(image_url).then(response => window.URL.createObjectURL(response.data))
  }

如果您想将其存储在数据库中，也可以将response.data存储在数据库中。