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>

这有一个错误，即属性中的插值已被删除。正如回答 this question 所解释的那样，您应该使用 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检查器中显示的图像url是<img src="/img/picture1.ea361a2e.png">。

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

Answer 1

我很幸运地做了以下事情。

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