Vue 3 Img 绑定

Question

我正在使用 Vue 3，但在绑定我的 src url 时遇到问题。我有一个简单的静态 data.js 文件，其中包含一个对象数组，如下所示

data: [
    {
        name: "iPhone 15",
        imgURL: "laptop",
    },]

我的数组中有 3 个项目，它们都具有相同的设置。 我无法将它们绑定到 vue 文件中的 img 标签。设置如下

<script setup>
    const url = data.data[position].imgURL
</script>

<template>
    <img :src="`../images/${url}.png`" alt="">
</template>

我尝试了多种方法，将 data.url 替换为 = 完整的 url 路径。我尝试过导入和使用计算，但也没有成功。

“检查”中的源图片中显示的内容
img :src="

../images/${url}.png

"

路径和导入都是正确的，因为我正在使用对象中的其他数据。

不确定哪些部分无法正常工作。任何帮助将不胜感激。

Answer 1

<script setup>
data: [ { name: "iPhone 15", imgURL: "laptop", },{ name: "iPhone 14", imgURL: "laptop1"}]
</script>
<template>
<div v-for="(item,index) in data" :key="index">
<img :src="`../images/${item.imgURL}.png`" alt="">
</div>
</template>