src属性中的VueJS插值

Question

在带有TypeScript和Vuetify应用程序的VueJS中，我有十张图片，分别称为picture1.png，picture2.png，picture3.png等。我试图为<div><img src="../assets/pictures/picture1.png"/></div>它们分别制作图片。这是我的代码：

<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>

例如，输出十个破碎的图像，并带有src，如下所示： src="../assets/pictures/picture1.png"

该文件不存在，因此显示损坏的图像图标。

如果我只是使用<img src='../assets/pictures/picture1.png'>，它会起作用，并且dom inspector中显示的图片网址为<img src="/img/picture1.ea361a2e.png">。

有没有一种方法可以src在Vue中动态地正确处理构建img ，但仍允许它以不处理src动态绑定的方式处理普通img 的方法呢？

Answer 1

我很幸运地做到了以下几点。

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