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

bomi 发表于 Dev

波米

我正在向组件发送一个对象。这个组件用 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>

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

丹妮

尝试：

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

<script>
export default {
  name: "Card",
  props: ["card"],
  methods: {
    getImgUrl(pic) {
      return require("../assets/" + pic);
    }
  }
};
</script>

有相对路径。

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

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

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

Codesandbox 示例：https ://codesandbox.io/s/vue-template-e1jsh

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。