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

Question

Trying to render some images in a loop. I take the paths from an object. Here is the object:

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': '' },
        ]
      }
    }

So, here's my code of rendering images:

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

Such a code generates the image with the path of:

But it says wrong path! If I add the image with a static path it generates the path of:

How to solve this problem?

Answer 1

You should use require

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' }
        ]
      }
    }