Vue.js v-for 不渲染图像

Question

我正在尝试使用 v-for 渲染四个图像，范围为 1 到 4。

v-for="n in 4" :key"n"

但是，使用 'n' 作为 src 的一部分不起作用。为什么？

 <div v-for="n in 4" :key="n">
    <img
       :src="`../assets/images/image-product-${n}-thumbnail.jpg`"
       class="rounded-xl h-16 w-16 hover:cursor-pointer"
    />
 </div>

尝试使用“key”代替“n”，将“n”转换为字符串...没有成功

如果我像这样硬编码，它会起作用

<img
      src="../assets/images/image-product-1-thumbnail.jpg"
      class="rounded-xl h-16 w-16 hover:cursor-pointer"
 />

Answer 1

如果您有可用的全局别名（@），我建议您使用它。

因为使用相对路径可以在本地工作，但是当项目编译（构建）时，相关路径可能会被破坏。

使用动态 src 路径时，您可以在加载之前需要它。

使用别名，您可以执行以下操作：

:src="`require(@/assets/images/image-product-${n}-thumbnail.jpg`)"