Encountering a challenge with Nuxt where I am unable to navigate back when utilizing the require method

Question

Encountering a challenge with Nuxt where I am unable to navigate back when utilizing the require method

After successfully viewing the image, I encountered an error when trying to navigate back using

<NuxtLink :to="{ path: 'About', hash: '#secondNav' }" class="close">

, which resulted in a message stating

Cannot find module './undefined.jpg'

"<template>
    <div class="container-fluid imgBackground vh-100">
        <div class="imgCont">
            <NuxtLink :to="{ path: 'About', hash: '#secondNav' }" class="close">
                <img
                    id="closeImg"
                    src="@/assets/images/closeHover.png"
                    src2="@/assets/images/close.png"
                />
            </NuxtLink>
            <img
                class="img-fluid"
                :src="imageUrl.myImg"
                alt="Sarah Project Image"
            />
        </div>
    </div>
</template>

<script>
export default {
    computed: {
        imageUrl() {
            return {
                myImg: require(`@/assets/images/gallery/${this.$route.params.img}.jpg`)
            };
        }
    }
};
</script>

javascript vue.js nuxt.js

Answer 1

Answer №1

If you’re using Nuxt, there’s no requirement to use the assets folder or the require function for images.

Nuxt simplifies this process with a dedicated directory known as the static folder.

Anything placed within the static folder is directly accessible from the root of your website domain.

For instance, if your domain is example.com and inside the static folder you have logo.png and folder/image.jpg:

The paths would be: example.com/logo.png and example.com/folder/image.jpg

To adapt this to your needs, you can place an “images” folder inside Nuxt's static directory.

In your computed method, you can format the image URL like this:

imageUrl() {
    return `/images/gallery/${this.route.params.img}.jpg`;
}

Then, simply access it in your code like so:

<img
    class="img-fluid"
    :src="imageUrl"
    alt="Sarah Project Image"
 />

Answer 2

If you’re using Nuxt, there’s no requirement to use the assets folder or the require function for images.

Nuxt simplifies this process with a dedicated directory known as the static folder.

Anything placed within the static folder is directly accessible from the root of your website domain.

For instance, if your domain is example.com and inside the static folder you have logo.png and folder/image.jpg:

The paths would be: example.com/logo.png and example.com/folder/image.jpg

To adapt this to your needs, you can place an “images” folder inside Nuxt's static directory.

In your computed method, you can format the image URL like this:

imageUrl() {
    return `/images/gallery/${this.route.params.img}.jpg`;
}

Then, simply access it in your code like so:

<img
    class="img-fluid"
    :src="imageUrl"
    alt="Sarah Project Image"
 />

Encountering a challenge with Nuxt where I am unable to navigate back when utilizing the require method

Answer №1

Similar questions

Keys in React Native's ListView are used to uniquely identify

Arrangement of Bootstrap card components

Material Grid adamantly refused to follow the typical horizontal layout, defying its default behavior

What is the best way to retrieve two elements from the same index level that are located in separate parent DIVs?

Error: Vue js - module store has not been defined

Looking for guidance on building a real-time React application with automatic data fetching linked to a nodejs backend

retrieve only the following occurrence throughout the entire file

Eliminate elements from an array using a specific key for filtering

What's the Hold-Up with IntersectionObserver in Brackets?

Vue.js HTML5 Editor_vueful

The 'classProperties' React component module is currently not enabled

Guide on increasing a basic counter and a counter with an object component using redux

Issues arising post transitioning to 14.0.0 from 13.0.0 version of ngx-masonry library leading to failed tests

Enhance the functionality of jqGrid by customizing key bindings for arrow and tab keys

Guide on retrieving an ArrayList() from intricate function in Angular

What is preventing the buttons from filling the entire space of the parent element in this case?

Is it possible to validate a template-driven form without using the model-driven approach?

Tap on the HTML5 video to exit the fullscreen mode

Insert the ng-if directive into an element using a directive

Navigation bar remaining fixed on mobile devices