Typescript src属性中的VueJS插值

在带有TypeScript和Vuetify应用程序的VueJS中，我有十张图片，分别名为picture1.png、picture2.png、picture3.png等。我正在尝试为每一张图片制作

。这是我的密码：

<template>
    <div class="home">
        <div class="pictures">
            <div v-for="index in Array.from({length: 10}, (v, k) => k+1)" :key="index">
                <img src='../assets/pictures/picture{{index}}.png'>
            </div>
        </div>
    </div>
</template>

这有一个错误，即属性中的插值已被删除。如回答所述，您应该使用v-bind：

<template>
<div class="home">
    <div class="picture">
        <div v-for="index in Array.from({length: 10}, (v, k) => k+1)" :key="index">
            {{index}}
            <img :src="'../assets/pictures/picture' + index + '.png'">
        </div>
    </div>
</div>

{{index}}

例如，它输出十个断开的图像，src字面上如下所示：

src=“../assets/pictures/picture1.png”

而该文件不存在，因此它会显示断开的图像图标

如果我只使用

，它会工作，并且dom检查器中显示的图像url是

---

有没有一种方法可以正确地在Vue中动态处理构建img

src

s，但仍然允许它以处理正常

src

s的方式处理它，而不进行动态绑定？

我很幸运地完成了以下工作

:src="require(`images/image-${index}.png`)"

---

我不明白为什么在dom检查器中看到的工作url在路径和文件名上是不同的。无论哪种方式，您都可以尝试

：src=`path/to/image${index}.png`

@johan我使用的是使用vue cli 3和npm run serve生成的项目，这会有所不同吗？