Dynamic Images in Vue.js
How I was able to load static images dynamically in <img> elements

Search for a command to run...
How I was able to load static images dynamically in <img> elements

No comments yet. Be the first to comment.
In this series, expect some detailed blogs on useful snippets or coding procedures that I find useful for my day-to-day life as a web developer!
One thing I found difficult in remembering how to do was making a button in VueJS act as an <a> tag and open a link via a new tab. Fortunately, this was way easier than I thought! <button @click="gotoLink()"> Click me! </button> methods: {...
In the world of web development using C#, the Response.Redirect method is a common way to guide users to different pages within a web application. However, there's a glaring issue that we need to address: the second parameter, which introduces unnece...

Ever need to trap the focus of the browser to a modal, a tour guide, or something else while trying to balance accessibility? I am far from an expert, but one thing I found on StackOverflow that helped me was this snippet from Shane McCurdy from th...

The Intro We had a dilemma today of an issue found in our code that needed to be fixed. After some time hunting I was able to find a distinct "this is good" reference in time and a distinct "this is not good" reference - but had no idea which commit ...

Introduction Ideally - we want our components to be kinda "dumb". Mostly just displaying data or gathering input from the user - the front end components shouldn't be smart enough to know what to do with said info once they have it. Usually this mea...

Before I Start You can find the podcast episode around this topic below! Introduction I shall begin with a quick story of something I went through this past week. I had a task to create analytics events for a few new key features that we wanted to ...

One thing I have encountered a few times is needing to choose dynamically between a static list of images to display. In Vue.js I kept this in my /assets folder, organized in a way that made sense, but I had issues actually loading the image.
An example of would work for a set static image is as follows:
<img src="@/assets/images/imagename.png" />
One option would be to have a list of <img> elements, and use v-if to determine which one to show. There are many reasons not to do this but it did cross my mind.
My first attempt was getting an image/asset name from a prop and loading that into the <img> element.
<figure class="image">
<img :src="image" />
</figure>
props: {
image: {
type: String,
default: '', // example: '@/assets/images/imagename.svg'
},
},
The problem with this method is the @/assets/... is handled by Vue, and when passed as a prop is either treated as a literal or not handled right regarding filename hashing. Either way - no image could be found.
One flicker of light hit me as I was trying out options and found that wrapping a require() statement in a computed getter seemed to do the trick - as that would allow Vue's hands to get a hold of the @/assets/... alias and properly find the image amidst the filename hashing. Needless to say, it was a good day.
<figure class="image">
<img :src="imagePath" />
</figure>
props: {
image: {
type: String,
default: '', // example: 'imagename.svg'
},
},
computed: {
imagePath() {
if (this.image !== '') {
return require(`@/assets/path/to/image/${image}`);
}
}
}
Did this help you? Perhaps there are other ways to do this? Is there a better way to do this that I am drawing a blank on? Let me know in the comments below, I would love to hear from you!