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>

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

有没有办法在Vue中动态地正确处理构建img src，但是仍然允许它在没有动态绑定的情况下处理普通src的方式来处理它？</ p>

Answer 1

我有幸做了以下事情。

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

src属性中的VueJS插值

1 个答案: