Vue.js v-for 不渲染图像

问题描述 投票:0回答:1

我正在尝试使用 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"
 />
vue.js vuejs3 v-for
1个回答
-1
投票

如果您有可用的全局别名(@),我建议您使用它。

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

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

使用别名,您可以执行以下操作:

:src="`require(@/assets/images/image-product-${n}-thumbnail.jpg`)"
© www.soinside.com 2019 - 2024. All rights reserved.