Question

我正在尝试将对象的URL绑定到我的组件，但无法正常工作。仅当我使用require并按如下所示直接链接它时，它才有效：SELECT id2, id4, arrayJoin(arraySlice(arraySort(groupArray(v3)), 1, 2)) v3 FROM tbl GROUP BY id2, id4，或者放置了相对路径，例如"v-bind:imagem="/home/thalys/Documentos/Dev/CodeX/santuarioec/src/imgs/anuncio.png""或'../imgs/anuncio.png'。

'@/imgs/anuncio.png'

这是我的组件“ Anuncio”

<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>

Answer 1

这是解决方案：

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

尝试一下。

Answer 2

如果您使用/src（https://cli.vuejs.org/）启动了项目，则vue-cli目录中应该有一个资产文件夹。

将您的imgs文件夹移至资产文件夹。将图像路径重写为@/assets/imgs/anuncio.png（不需要require()）。

v将图像从对象绑定到img src无法正常工作

2 个答案: