First of all: I am aware of a similar question (Vue JS data binding not working for img src) but I am still posting this question here since the solution of that question did not solve my problem.

I want to display an image in my web application (coded in VueJS), but unfortunately when I bind the image file location string to the src property of the img tag, the image is not shown in the web app.

I have the following code:

<template>
  <div class="home">
    <img src="@/assets/Home.jpg" />
    <img :src="src" />
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "Home",
  data() {
    return {
      src: "@/assets/Home.jpg",
    };
  },
});
</script>

The first img component gets displayed normally, but the second (which binds data to the src property) not.

I already tried (as suggested in Vue JS data binding not working for img src):

<img :src="require(src)" />

which gave me the error:

[Vue warn]: Error in render: "Error: Cannot find module '@/assets/Home.jpg'"

Thanks for any help!