如何从对象绑定图像的src？

Question

尝试在循环中渲染一些图像。我从一个物体中取出路径。 这是对象：

data () {
      return {
        logoRoutes: [
          { 'link': '../assets/images/clients/55spirit.png', 'alt': '55 Spirit logo' },
          { 'link': '../assets/images/clients/55aqua.png', 'alt': '55 Aqua logo' },
          { 'link': '../assets/images/clients/iam_different.png', 'alt': 'I\'m different logo' },
          { 'link': '../assets/images/clients/istiqlol.png', 'alt': '' },
          { 'link': '../assets/images/clients/health.png', 'alt': '' },
          { 'link': '../assets/images/clients/vitha_water.png', 'alt': '' },
          { 'link': '../assets/images/clients/iam_fighter.png', 'alt': '' },
          { 'link': '../assets/images/clients/horeca.png', 'alt': '' },
          { 'link': '../assets/images/clients/kings_records.png', 'alt': '' },
          { 'link': '../assets/images/clients/flytj.png', 'alt': '' },
          { 'link': '../assets/images/clients/happy_smile.png', 'alt': '' },
          { 'link': '../assets/images/clients/formula55.png', 'alt': '' },
          { 'link': '../assets/images/clients/bima.png', 'alt': '' },
          { 'link': '../assets/images/clients/dorob_fight.png', 'alt': '' },
          { 'link': '../assets/images/clients/muzaffar.png', 'alt': '' },
          { 'link': '../assets/images/clients/american_spaces.png', 'alt': '' },
          { 'link': '../assets/images/clients/synergy.png', 'alt': '' },
          { 'link': '../assets/images/clients/kmp.png', 'alt': '' },
          { 'link': '../assets/images/clients/55startups.png', 'alt': '' },
          { 'link': '../assets/images/clients/multikid.png', 'alt': '' },
          { 'link': '../assets/images/clients/55trade.png', 'alt': '' },
        ]
      }
    }

所以，这是我渲染图像的代码：

<img :src="logoRoutes[0].link" :alt="logoRoutes[0].alt" />

这样的代码生成的图像路径为：

但它说错路！ 如果我使用静态路径添加图像，则会生成以下路径：

如何解决这个问题？

Answer 1

您应该使用要求

data () {
      return {
        logoRoutes: [
          { 'link': require('../assets/images/clients/55spirit.png'), 'alt': '55 Spirit logo' },
          { 'link': require('../assets/images/clients/55aqua.png'), 'alt': '55 Aqua logo' }
        ]
      }
    }