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 检查器中显示的图像 url 是 <img src="/img/picture1.ea361a2e.png">。

有没有一种方法可以在 Vue 中动态地正确处理构建 img srcs，但仍然允许它像处理普通 srcs 一样处理它而无需动态绑定？

Answer 1

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

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

src 属性中的 VueJS 插值

VueJS interpolation in src attribute

src

typescript

vue.js

vuetify.js