如何在 Nuxt 中使用动态图像？答案

【问题标题】：How to use dynamic images in Nuxt?如何在 Nuxt 中使用动态图像？
【发布时间】：2022-06-30 12:46:46
【问题描述】：

我正在尝试在 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 属性内插值的所有组合，但没有任何效果。

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

我的想法已经用完了。如果有人能帮我找出问题所在，我将不胜感激。

【问题讨论】：

你在 data 中定义了items 吗？
@Saeed 是的，items 也在数据上定义。我忘了提到v-for 中每个项目的其他值显示得非常好，所以那里没有问题。只是img 元素没有显示图像，尽管正确的路径在 HTML 中。
taking up the appropriate space，你检查图像的宽度和高度了吗？任何 overflow hidden 样式或类似的样式？
@Saeed 在包裹 img 标签的 div 上隐藏了一个溢出。 img 标签本身的高度和宽度是 100%。我刚刚尝试使用开发控制台粘贴一个 url，它立即显示在页面上，所以我认为 CSS 很好。
这能回答你的问题吗？ Vue.js dynamic images not working

标签： javascript vue.js nuxt.js

【解决方案1】：

尝试这样使用它

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

如Nuxt documentation关于图片所示。

【讨论】：

Hi Kissu Mine 还没有

【解决方案2】：

' 我尝试了这种方法，在计算值中使用了 require ，但我仍然收到 not found in module 错误。知道我做错了什么吗？

雷莫

【讨论】：