image not found in assets when using @error in Nuxt

Question

I have a card component which has a structure for an image like this. One image can't be loaded because of (HTTP Status: 403). So I want to replace it with a default one. So I looked it up and learn that I can use @error.


<div class="card-thumbnail">
    <img
       :src="cardImage"
        alt=""
        @error="$event.target.src = '~/assets/images/error.jpeg'"
     />
</div>

However this code gives me error that "error.jpeg" can not be found. My folder structure is correct because without @error and a src like this:

src="~/assets/images/error.jpeg"

I can actually see my error.jpeg. So what I am doing wrong here ?

Try out @error="$event.target.src = require('~/assets/images/error.jpeg')" — Boussadjra Brahim
– Boussadjra Brahim, Commented Jul 14, 2021 at 11:37
You need to use the require syntax like here stackoverflow.com/a/66365980/8816585 also, why do you do an affectation. Wanted to write $emit("something", "error.jpg")`? — kissu
– kissu, Commented Jul 14, 2021 at 11:38
@BoussadjraBrahim yep that works. But why ? I mean it is not dynamic tho. It is a static file in my folder — omerS
– omerS, Commented Jul 14, 2021 at 11:40

Boussadjra Brahim · Accepted Answer · 2023-05-26 15:42:56Z

3

Nuxt 2

Based on this you need to use require because images inside assets directory are considered as modules :

@error="$event.target.src = require('~/assets/images/error.jpeg')"

Nuxt 3

if the image is in public folder :

   @error="$event.target.src = '/images/error.jpeg'"

if it's in assets folder :

  @error="$event.target.src = '~/assets/images/error.jpeg'"

edited May 26, 2023 at 15:42

answered Jul 14, 2021 at 11:43

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stefan Over a year ago

Does not work on Nuxt3 anymore.

Stefan · Accepted Answer · 2023-05-26 14:09:35Z

0

Nuxt3 Solution:

<template>
<div class="card-thumbnail">
    <img
       :src="cardImage"
        alt=""
        @error="$event.target.src = image"
     />
</div>
</template>

<script setup>
import image from '~/assets/images/error.jpeg'
</script>

Reference: Why loading dynamically assets fails on Nuxt v3

answered May 26, 2023 at 14:09

Stefan

3914 silver badges17 bronze badges

Collectives™ on Stack Overflow

image not found in assets when using @error in Nuxt

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related