src属性中的VueJS插值

Question

在带有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>

例如，它会输出十个断开的图像，src的字面意思如下：src=“../assets/pictures/picture1.png”

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

如果我只使用

有没有一种方法可以在Vue中正确地动态处理构建imgsrcs，但仍然允许它以处理正常srcs的方式处理它，而无需动态绑定？




Answer 1

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

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