[Vuejs]-Nuxt not letting me route back when using require on source attribute

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"
 />

Leave a comment