Javascript v-将图像从对象绑定到img src不起作用

我试图将对象的URL以友好方式绑定到我的组件，但它不起作用。只有当我使用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>

从“@/templates/SiteTemplate”导入SiteTemplate
从“@/components/Anuncio/Anuncio”导入Anuncio
导出默认值{
姓名：'家'，
组成部分：{
网站模板，
安努西奥
},
数据（）{
返回{
安努西奥斯：[
{“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”}
]
}
}
}

这是我的组件“Anuncio”

导出默认值{
名称：“Anuncio”，
道具：['titulo'，'imagem'，]，
数据（）{
返回{
}
}
}

如果您已使用

vue cli

（）启动项目，则您的

/src

目录中应该有一个资产文件夹

---

将您的

imgs

文件夹移动到资产文件夹中。将图像路径重写为

@/assets/imgs/anuncio.png

（无

require（）

required）

因此，以下是解决方案：

在

Anuncio

组件中，必须将图像路径硬编码到

require（）

方法。因此，您的

img

HTML标记如下所示：

<img class="img" v-bind:src="require(`../imgs/${imagem}`)"/>

---

试试看。

你的项目的完整路径是什么？/home/thalys/Documentos/Dev/CodeX/santuarioecI将我的“imgs”文件夹移到了assets，就像下面的人告诉我的那样。然后我试着照你说的做，但也没用。我照你说的做了，但还是没用。还有其他解决方案吗？谢谢duude，非常感谢！我只需要对你给出的解决方案做一些修改。我只留下了我的“Anuncio”组件，按照你在我的主页上说的做了：耶！非常感谢你！！

<img class="img" v-bind:src="require(`../imgs/${imagem}`)"/>

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" }
          ]