I want to display an icon with a name file given from props received from parent component in Vuejs 3. The icon name comes from a DB via a method getting info.
Here is the part of my script getting props :
<script>
export default {
props: ['id', 'name', 'icon']
}
</script>
This code is working well in template (with give name in string) :
<img v-bind:src="require('../../assets/icon01.png')" />
This code is working well in template (displaying the received icon name) :
<br>Icon name : {{ icon }}
To add the dynamic image, I tried every combination of :
<img v-bind:src="require('../../assets/' + this.icon)" />
<img :src="require(`../../assets/${this.icon}`)" />
<img v-bind:src="require(this.getIconName())" />
I tried to add a method to the component methods list to concat and return the full string and use it within the require or even directly. I tried to use v-bind, v-img, img, everything i could find on the web.
Even a concat like this :
<img v-bind:src="require('../../assets/' + 'icon01.png')" />
in the require is working fine, as long as this is not with my variable.
I keep getting errors, depending on which version i'm trying.
One of the most usual errors is :
ERROR in ./src/assets/stop16.ico 1:0 Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)
The "stop16.ico" is another icon from the asset folder, i don't know how it's getting it since i am not even using it.
Any idea what could save me ?
I finally ended up with this :
<img v-bind:src="require(`../../assets/${this.icon}`)" />
And it works now, i don't get why it wasn't working from the start.