v-bind image src to dynamic image links

Because v-bind:src or simply :src is not recognized by webpack thus the images are not loaded and compiled to dist.
One way to solve the problem is by using the require.context provided by webpack.

    getUrl (id) {
      var images = require.context('../assets/images/photos/', false, /\.jpg$/)
      var imgArray = this.carouselImages
      if (id === 1) {
        return images('./' + imgArray[0] + '.jpg')
      }
      return images('./' + id + '.jpg')
    }

but :src="getUrl()" doesn’t seem to work very well with v-for.

or simply put the image folder under the root/static folder, everything in static will be copied under the assets of the built project and refer it in :src.

Leave a Reply

Your email address will not be published. Required fields are marked *