0👍
✅
There’s no need to use require or the assets folder for images using Nuxt.
Nuxt provides a special folder called static
.
Anything within this folder is mapped to the root of the domain.
Say for you have the domain example.com.
In your static folder you have:
- logo.png
- folder/image.jpg
Both of those would be mapped as follows:
- example.com/logo.png
- example.com/folder/image.jpg
To apply this to your requirement, you could put your images
folder inside Nuxt’s static
folder.
Then in your computed method you’d simply format it like this:
imageUrl() {
return `/images/gallery/${this.route.params.img}.jpg`;
}
and access it like this:
<img
class="img-fluid"
:src="imageUrl"
alt="Sarah Project Image"
/>
Source:stackexchange.com