Struggling to dynamically load images in a single file component, I keep encountering an error stating that the module cannot be found. It seems like I'm attempting something similar to what was discussed in this post on Stack Overflow, but I can't pinpoint where my mistake lies. My project was set up using the webpack template.
Below is the relevant code snippet from my template:
<router-link :to="{ name: 'JobsDetail', params: { slug: job.slug } }">
<span class="icon">
<img :src="getIconPath(job.slug)"/>
</span>
{{ job.title }}
</router-link>
This is the function I'm utilizing to retrieve the image:
methods: {
getIconPath (iconName) {
const icons = require.context('../assets/', false, /\.png$/)
return iconName ? icons(`./${iconName}.png`) : ''
}
}
The images are stored in the /src/assets/ directory. The error message displayed in the browser console reads:
[Vue warn]: Error in render: "Error: Cannot find module './some-icon.png'."I'm uncertain whether this issue stems from a webpack configuration problem or if it's related to the getIconPath function itself. Any assistance would be greatly appreciated. Thank you!