javascript - VUE JS 图片从数组绑定(bind)

Question

我希望将一些图片绑定(bind)到对象数组中的 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' }
    ]
  }
}