Nuxt - Sending Relative Path as Prop Leads to Error 404

Question

Nuxt - Sending Relative Path as Prop Leads to Error 404

I am currently working with an array of JSON objects that I need to import onto a webpage. The process involves iterating through the data and passing the objects as a prop to a component. One of the attributes within the JSON data is a relative path for an image located in my /assets/ folder.

For example, the JSON structure:

[
    {
        "title":"val1",
        "img": "~/assets/image1.jpg",
        "text":"Lorem ipsum dolor sit amet"

    },
    {
        "title": "val2",
        "img": "~/assets/image2.jpg",
        "text":"Lorem ipsum dolor sit amet"

    },
    {
        "title": "val3",
        "img": "~/assets/image3.jpg",
        "text":"Lorem ipsum dolor sit amet"
 
    }
]

I am using a component from the Vue library (bootstrap-vue) that has an "img-src" directive for displaying images. However, when passing the prop with the image path to this directive, I am encountering a malformed path and a resulting 404 error.

Here is an example of usage:

<div>
    <b-card :img-src="data.img"></b-card>
</div>

<script>
export default {
    props: {
        data: {
            title: String,
            img: String,
            text: String
        }
    }
}
</script>

The requested URL for the image asset appears as http://localhost:3000/~/assets/image1.jpg. However, if I directly provide a static string path to the directive:

<div>
    <b-card img-src="~/assets/image1.jpg"></b-card>
</div>

The image loads correctly with the URL for the asset being http://localhost:3000/_nuxt/assets/image1.jpg

I am seeking assistance in understanding what might be causing this issue.

javascript vue.js nuxt.js

Answer 1

Answer №1

Fixing Props Declaration

It seems like there is an issue with how your props are declared. It's recommended to declare individual props for title, img, and text instead of using them within a single data prop. Here is the correct way to declare them:

export default {
    props: {
        title: String,
        img: String,
        text: String
    }
}

Handling Asset URLs in Nuxt

When working with asset URLs in Nuxt, it's important to note that vue-loader is used to load Vue Single File Components (SFCs) and automatically transforms asset URLs into Webpack module requests. For dynamic values like v-bind, you may need to explicitly use require. You can configure this behavior via the transformAssetUrls option in vue-loader.

The bootstrap-vue Nuxt plugin configures the transformAssetUrls to include <b-card>.imgSrc, allowing you to use

<b-card img-src="~/assets/image1.jpg">

without any additional handling.

If you have dynamic img-src URLs, you can resolve them using require, like this:

<template>
  <b-card :img-src="computedImg"></b-card>
</template>

<script>
export default {
  //...
  computed: {
    computedImg() {
      return require('~/assets/' + this.img.replace(/^~\/assets\//g, ''))
    }
  }
}
</script>

For a demo, you can check this link.

Answer 2

Fixing Props Declaration

It seems like there is an issue with how your props are declared. It's recommended to declare individual props for title, img, and text instead of using them within a single data prop. Here is the correct way to declare them:

export default {
    props: {
        title: String,
        img: String,
        text: String
    }
}

Handling Asset URLs in Nuxt

When working with asset URLs in Nuxt, it's important to note that vue-loader is used to load Vue Single File Components (SFCs) and automatically transforms asset URLs into Webpack module requests. For dynamic values like v-bind, you may need to explicitly use require. You can configure this behavior via the transformAssetUrls option in vue-loader.

The bootstrap-vue Nuxt plugin configures the transformAssetUrls to include <b-card>.imgSrc, allowing you to use

<b-card img-src="~/assets/image1.jpg">

without any additional handling.

If you have dynamic img-src URLs, you can resolve them using require, like this:

<template>
  <b-card :img-src="computedImg"></b-card>
</template>

<script>
export default {
  //...
  computed: {
    computedImg() {
      return require('~/assets/' + this.img.replace(/^~\/assets\//g, ''))
    }
  }
}
</script>

For a demo, you can check this link.

Nuxt - Sending Relative Path as Prop Leads to Error 404

Answer №1

Fixing Props Declaration

Handling Asset URLs in Nuxt

Similar questions

Is there a way to execute a PHP script using Ajax without needing any return values?

Changing the color of a Navlink when focused

Tips for showcasing elements individually in JavaScript when a button is clicked and halting on a random element

Ways to ensure your component is updated when there are changes to the props in N

Switch out a new js file every time the page is reloaded

Animate the sliding of divs using the JavaScript animation function

Preventing the addition of duplicate items to an array

streaming audio data from a MongoDB database to an HTML audio element

Starting the stored procedure/function using the sequelize.query() method

Make sure to validate for null values when extracting data using the useSelector hook

Switch from Index.html to Index.html#section1

Animate the jQuery display property to show a table without changing any specified spatial dimensions

Resolved the time zone problem that was affecting the retrieval of data from the AWS Redshift database in Next

Enable lightbox functionality prior to all images being fully loaded

most effective method for establishing a relationship between a variable and its corresponding identification number

Is it possible to bundle Live using Angular 2 and SystemJS-builder, even when attempting to load modules from node_modules?

Finding the equivalent of BigInt from Javascript in C#

Prevent users from changing dropdown options after a form submission fails using Javascript and Jquery

Tips for sending a parameter from a Vue component attribute to the component's SCSS

Message displayed on picture carousel