Vue NuxtJS custom image tag not loading my src

Question

I want to create a custom image component in NuxtJS (to pass rgb color and it automatically colorize the image), but I dont get it working that it loads my image when the img in my CustomImage Component get the path passed.

Error:

logotext.png:1 GET http://localhost:8080/@/assets/images/logotext.png 404 (Not 
Found)

My CustomImage:

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

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'nuxt-property-decorator';

@Component({})
export default class CustomImage extends Vue {
  @Prop({
    type: String,
    required: true,
  })
  public src!: string;
  @Prop({
    type: String,
    required: true,
  })
  public alt!: string;
}
</script>

<CustomImage src="@/assets/images/logotext.png" alt="Logo" /> — Leahpar
– Leahpar, Commented Jun 21, 2020 at 10:15
Try <CustomImage src="~/assets/images/logotext.png" alt="Logo" /> if that doesn't work, move the images to images folder in static directory and use it like <CustomImage src="/images/logotext.png" alt="Logo" /> — Boussadjra Brahim
– Boussadjra Brahim, Commented Jun 21, 2020 at 10:20
Thank you. The solution with the static folder worked for me! — Leahpar
– Leahpar, Commented Jun 21, 2020 at 10:23

Boussadjra Brahim · Accepted Answer · 2020-06-21 10:27:46Z

1

Create a folder called images inside the static directory and move your images into it, then use them as follows :

 <CustomImage src="/images/logotext.png" alt="Logo" />

the / refers to static directory.

check this for more details

answered Jun 21, 2020 at 10:27

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

Vue NuxtJS custom image tag not loading my src

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related