javascript - Nuxt中如何使用动态图片？

Question

我试图在 Nuxt 中显示 Assets 文件夹中的图像，但即使 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)
  })
},

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

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

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

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

Answer 1

在Nuxt v3中，你可以这样使用它

<script setup>
import img1 from `~/path/to/img1`
</script>

<template>
  <img :src="img1" />
</template>