时间戳

首页 > 解决方案 > 如何修复图像元素上的绑定

javascript - 如何修复图像元素上的绑定

问题描述

我正在向组件发送一个对象。这个组件用 v-for 循环。但是组件不能列出图像

我试图发送属性并从父组件获取属性。

<div class="container">
      <Card v-for="card in cards" :card="card"/>
    </div>
  </div>
</template>

<script>
  import Card from "./Card";

  export default {
    name: "GameCards",
    components: {Card},
    data() {
      return {
        cards: [
          {id: 1, comp: 'Card', img: '/src/assets/1.jpg'},
          {id: 2, comp: 'Card', img: '/src/assets/2.jpg'},
          {id: 3, comp: 'Card', img: '/src/assets/3.jpg'},
          {id: 4, comp: 'Card', img: '/src/assets/4.jpg'},
          {id: 5, comp: 'Card', img: '/src/assets/5.jpg'}
        ]
      }
    }
  }
</script>

这是 Card.vue

<template>
  <div class="card">
    <img :src="card.img" alt="Test img">
    {{card.img}}
  </div>
</template>

<script>
  export default {
    name: "Card",
    props: ['card']
  }
</script>

图片看不到。只是空白卡。

标签： javascriptvue.js

解决方案

您的 URL 是绝对的（因为它们以 开头/）-因此它们被原封不动地使用，因此引用您的公用文件夹。您应该确保这些文件确实存在/public于项目的文件夹中。否则，如果它们驻留在/src文件夹中 - 您应该将它们称为@/assets/1.jpg或什至~@/assets/1.jpg（您应该测试哪个适合您）

仔细阅读文档 - https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

推荐阅读