Nuxt中如何使用动态图片？

Question

我正在尝试在 Nuxt 中显示资产文件夹中的图像，但即使 HTML 中的 src 值正确，它也不会工作。

这是代码的摘录。

<div v-for="(item, index) in items" :key="index">
  <div class="item-img">
   <img :src="`../assets/imgs/${item.img}`"/>
  </div>
</div>

以上路径是正确的，因为该组件位于与 assets 文件夹处于同一根级别的 pages 文件夹中。

我在数组中有图像文件名，如下所示：

data() {
  return {
    images: ['image0.jpg', 'image1.jpg'],
  ...
}

有一个异步函数正在进行 API 调用获取一些项目。 API 完成后，每个项目都会添加一张随机图片。

async getMovies() {
  const data = axios.get `api_call_here`)
  const result = await data
  result.data.results.forEach((item) => {
    let randomImg = 
    this.images[Math.floor(Math.random() * 
    this.images.length)]
    item.img = randomImg
    this.items.push(item)
  })
},

我确信图像的路径是正确的并且它们存在于指定的文件夹中。我也知道该路径有效，因为我可以在同一级别的另一个组件内显示同一资产文件夹中的任何单个图像。

我想我已经尝试了 src 属性内插值的所有组合，但没有任何效果。

最后，当我在开发人员控制台中检查它们时，我可以在元素本身中看到正确的路径。更令人困惑的是，图像似乎占据了页面上适当的 space，但它们是空的（空白 space）。

我运行没主意了。如果有人能帮我找出问题所在，我将不胜感激。

Answer 1

试试这样用

<img :src="require(`../assets/imgs/${item.img}`)" />

如Nuxt documentation关于图像所示。

Nuxt中如何使用动态图片？

How to use dynamic images in Nuxt?

javascript

vue.js

nuxt.js