我正在尝试使用 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"
/>
如果您有可用的全局别名(@),我建议您使用它。
因为使用相对路径可以在本地工作,但是当项目编译(构建)时,相关路径可能会被破坏。
使用动态 src 路径时,您可以在加载之前需要它。
使用别名,您可以执行以下操作:
:src="`require(@/assets/images/image-product-${n}-thumbnail.jpg`)"