我试图将对象的 URL 动态绑定(bind)到我的组件,但它不起作用。仅当我使用 require 并且直接链接它时它才有效,如下所示: "v-bind:imagem="/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png""
,或者如果我输入相对路径,例如 '../imgs/anuncio.png'
或 '@/imgs/anuncio.png'
。
<template>
<div>
<site-template>
<div class="anuncio">
<anuncio v-for="anuncio in anuncios" v-bind:key="anuncio.id" v-bind:imagem="anuncio.imagem">
</anuncio>
</div>
</site-template>
</div>
</template>
<script>
import SiteTemplate from '@/templates/SiteTemplate'
import Anuncio from '@/components/anuncio/Anuncio'
export default {
name: 'Home',
components: {
SiteTemplate,
Anuncio
},
data () {
return {
anuncios: [
{ "id": 1, "imagem": "/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png" },
{ "id": 2, "imagem": "/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png" },
{ "id": 3, "imagem": "/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png" },
{ "id": 4, "imagem": "/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png" },
{ "id": 5, "imagem": "/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png" }
]
}
}
}
</script>
这是我的组件“Anuncio”
<template>
<div class="anuncio">
<div class="w3">
<img class="img" v-bind:src="imagem"/>
</div>
</div>
</template>
<script>
export default {
name: 'Anuncio',
props: ['titulo', 'imagem'],
data () {
return {
}
}
}
</script>
最佳答案
所以这是解决方案:
在您的 Anuncio
组件中,您必须将图像的路径硬编码到 require()
方法。因此,您的 img
HTML 标签如下所示:
<img class="img" v-bind:src="require(`../imgs/${imagem}`)"/>
在包含带有图像名称的路径的数组中,您应该只提供名称和 .png
。
它看起来像这样:
anuncios: [
{ "id": 1, "imagem": "anuncio.png" },
{ "id": 2, "imagem": "anuncio.png" },
{ "id": 3, "imagem": "anuncio.png" },
{ "id": 4, "imagem": "anuncio.png" },
{ "id": 5, "imagem": "anuncio.png" }
]
尝试一下。
关于javascript - v-将图像从对象绑定(bind)到 img src 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54892891/