Issue with conditional image source URL in NUXT component not functioning as expected

Question

Issue with conditional image source URL in NUXT component not functioning as expected

I am currently attempting to dynamically render an image source path based on the provided prop in the component. In case the image does not exist in the assets folder, I want to include a fallback path. Below is the code snippet for my image tag:

<img 
  :src="require(`@/assets/${project.image || 'day-1.jpg'}`)" 
  alt="project image"
  class="rounded-xl row-span-3 col-span-1"
>

For the initial instance of this component on the website, the {project.image} correctly provides the image file name from the store as: gfs.jpg. However, this particular image does not exist in the file tree.

In this scenario, shouldn't the code above prompt Webpack to render the day-1.jpg image due to using the || operator when the gfs.jpg file is not found?

An error is being thrown by Webpack stating Cannot find module './gfs.jpg' with error code 500

I also attempted to use an @error tag that triggers a handler function within methods: {}, but it does not execute when encountering this particular error.

javascript vue.js nuxt.js

Answer 1

Answer №1

When using the || operator, exceptions are not caught, this is particularly evident when a required URL does not exist.

To address this issue, one approach is to utilize a method or computed property that manages the error thrown by require, defaulting to day-1.jpg:

<template>
  <img :src="imgUrl">
</template>

<script>
export default {
  props: {
    project: Object
  },
  computed: {
    imgUrl() {
      try {
        return require(`@assets/${this.project?.image}`)
      } catch (e) {
        return require('@/assets/day-1.jpg')
      }
    }
  }
}
</script>

Answer 2

When using the || operator, exceptions are not caught, this is particularly evident when a required URL does not exist.

To address this issue, one approach is to utilize a method or computed property that manages the error thrown by require, defaulting to day-1.jpg:

<template>
  <img :src="imgUrl">
</template>

<script>
export default {
  props: {
    project: Object
  },
  computed: {
    imgUrl() {
      try {
        return require(`@assets/${this.project?.image}`)
      } catch (e) {
        return require('@/assets/day-1.jpg')
      }
    }
  }
}
</script>

Answer 3

Answer №2

This is how I revised it:

<template>
  <div>
    <img :src="require(`@/assets/${selected}`)" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      project: {
        image: 'forest.jpg', // try testing this with an empty string ''
      }
    }
  },
  computed: {
    selected() {
       // Using optional chaining (?.) would serve as a good fallback for your project
      return this.project?.image || 'morning-1.jpg'
    },
  },
}
</script>

If there are any issues with the images or if your server refreshes too quickly, you might encounter strange errors in the console and the quickest solution would be to restart the server.

For more solutions, refer to: Vue.js dynamic images not working

Answer 4

This is how I revised it:

<template>
  <div>
    <img :src="require(`@/assets/${selected}`)" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      project: {
        image: 'forest.jpg', // try testing this with an empty string ''
      }
    }
  },
  computed: {
    selected() {
       // Using optional chaining (?.) would serve as a good fallback for your project
      return this.project?.image || 'morning-1.jpg'
    },
  },
}
</script>

If there are any issues with the images or if your server refreshes too quickly, you might encounter strange errors in the console and the quickest solution would be to restart the server.

For more solutions, refer to: Vue.js dynamic images not working

Issue with conditional image source URL in NUXT component not functioning as expected

Answer №1

Answer №2

Similar questions

JavaScript forEach functionality is not compatible with Dynamics CRM 2016

The importance of dependencies in functions and testing with Jasmine

Activate a button on-the-fly

Using specific sections of JSON data to display in an alert message (Vanilla JavaScript)

Is there a way to host a Vue app bundled with webpack in Django without having to recompile for every update?

tips for retrieving global variables from ajax calls using promises

Exploring the Benefits of Using Gatsby with Material-UI: The Importance of Creating a Page

Unable to retrieve options from a particular select box

Error: The current element cannot be clicked. Please try again

Ways to incorporate radio buttons, checkboxes, and select fields into a multi-step form using JavaScript

What are the pros and cons of passing an imported object from a parent component to its children as props versus directly importing that object within the children components?

The value of "asp-route-id" is dynamically determined through the use of

Saving the Structure of an XML Document Using JQuery

Different time parameter for setting a timeout in Javascript

suggestions for organizing data in an AJAX/jQuery page

What is the process of invoking the POST method in express js?

Challenge with timing in slideUp and slideDown animations (jQuery)

Using PHP functions in an AJAX request

Activate the button solely when the text field has been populated without any spaces

This is some guidance on toggling the visibility of dynamically created divs in Vuejs when a button is clicked