时间戳

首页 > 解决方案 > v-将图像从对象绑定到 img src 不起作用

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

问题描述

我正在尝试将对象的 URL 动态绑定到我的组件，但它不起作用。它仅在我使用 require 并且直接链接它时才有效，如下所示："v-bind:imagem="/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png""，或者如果我放置了相对路径，例如'../imgs/anuncio.png'or '@/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>

标签： javascriptvue.js

解决方案

所以这里是解决方案：

在您的Anuncio组件中，您必须将图像的路径硬编码到require() 方法中。因此，您的imgHTML 标记将如下所示：

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

试试看。

推荐阅读