1

In the main App.vue component have an img element with src property hard coded as shown below:

<img 
  src= './assets/Option01.gif'
  alt="Image couln't be loaded"
/>

I'm trying to make this a dynamic parameter where, based on certain conditions the displayed image will change. As shown below, I've refactored the code to bind the src property to a variable:

<img 
  :src= "image"
  alt="Image couln't be loaded"
/>

export default {
  name: 'App',
  data() {
    return {
      selectedImage: 0,
      images: [
        './assets/Option01.gif',
        './assets/Option02.gif',
        './assets/Option03.gif',
        './assets/Option04.gif',
        './assets/Option05.gif'
      ]
    }
  },
  computed: {
    image(){
      return this.images[this.selectedImage]
    }
  }
}

enter image description here

Unfortunately the console will log the message 'GET http://localhost:8080/assets/Option01.gif 404 (Not Found)'.

Any idea on how to proceed in order to make it work?

Jos
  • 63
  • 5
  • instead of './assests/etc' try '@/assests' – No Name May 30 '22 at 15:37
  • perhaps you working on component or page so you must use ../assets/Option01.gif ./ is current directory and ../ is one step back – saleh shokouhi May 30 '22 at 15:40
  • You should use absolute path for the image (referring inside the `public` folder) - or a relative one (relative to the webroot, which is denoted by `publicPath` in `vue.config.js`) – IVO GELOV May 30 '22 at 17:09

1 Answers1

0

As per the info I found in this other post the function require() is needed before the image URL in order to make it work:

<img 
  :src= "require(image)"
  alt="Image couln't be loaded"
/>
Jos
  • 63
  • 5