[Vuejs]-Using import/require in Vue.js data property with dynamic value

by

0👍

✅

To update on this (and I’m not sure this is the ‘proper’ way of doing it).. the code example below now works.

<template>
  <img
    alt="Random image"
    :src="image"
  />
</template>

<script>
  const randomImage = `image-0${(Math.floor(Math.random() * 5) + 1)}`

  export default {
    data () {
      return {
        image: null
      }
    },

    mounted () {
      import('@/some/module/folder/' + randomImage + '.jpg').then((image) => {
        if (image.default) {
          this.image = image.default
        }
      })
    }
  }
</script>

If anyone has a more elegant solution then please let me know.

Leave a comment