Vue js using asset path for images in components-CodePudding

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.

CodePudding user response：

Try

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

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

:src="img_url"

CodePudding user response：

Did you try to bind image

:src="img_url"