CODEWITHSUNDEEP
javascriptvue.js
Marvin S.
Marvin S.

Reputation: 43

Vue js using asset path for images in components

I am using Vue js 3 to create a webpage.

My (SingleFile) component:

<template>
  <img
    alt="Vue logo"
    src="{{ img_url }}"
    class="-mr-16 object-cover image-focus"
  />
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  props: {
    img_url: String
  },
})
export default class HelloWorld extends Vue {
  msg!: string;
}
</script>

The way I call it:

<CatchImage img_url="@/assets/images/Image.jpg" />


<script lang="ts">
import { Options, Vue } from "vue-class-component";
import Image from "@/components/Image.vue";

@Options({
  components: {
    Image,
  },
})
</script>

This does not load the image. Instead I get an error. Ich I replace the variabvle with the actual path it works fine.

Upvotes: 1

Views: 911

Answers (1)

Vojin Purić
Vojin Purić

Reputation: 2376

Try

<CatchImage :img_url="require(`@/assets/images/Image.jpg`)" />

Also in template use :src instead of src like this:

:src="img_url"

Upvotes: 1

Related Questions