Question

我希望将一些图片绑定到一个对象数组中的img元素。我可以让字符串转到html元素，但是我的图片有问题。任何帮助都会很棒。这是我的github帐户，因为我无法让javascript显示在模板上，并且不希望它难以阅读。

https://github.com/UgotGoosed/Vue-Shopping-Cart

Answer 1

尝试使用:src="require(path/to/image)"。

作为一个说明。 :src=""是我认为v-bind:src=""的缩写。

就像这个例子：

<figure class="meals-showcase-list-item">
      <img
        class="meals-showcase-list-item-photo"
        :src="require('../../assets/images/' + meal.image)"
        :alt="meal.description">
    </figure>

在组件数据中，我有一个图像源数组：

data () {
  return {
    meals: [
      { image: '1.jpg', description: 'Korean bibimbap with egg and vegetables' },
      { image: '2.jpg', description: 'Simple italian pizza with cherry tomatoes' },
      { image: '3.jpg', description: 'Chicken breast steak with vegetables' },
      { image: '4.jpg', description: 'Autumn pumpkin soup' },
      { image: '5.jpg', description: 'Paleo beef steak with vegetables' },
      { image: '6.jpg', description: 'Healthy baguette with egg and vegetables' },
      { image: '7.jpg', description: 'Burger with cheddar and bacon' },
      { image: '8.jpg', description: 'Granola with cherries and strawberries' }
    ]
  }
}

Answer 2

在index.html文件中更改

<img class="group list-group-image" src="" alt="" />

到

<img class="group list-group-image" v-bind:src="product.img" alt="" />

VUE JS图片绑定来自数组

2 个答案: