javascript - Bound image not displaying in Vue project

Question

I have a component that displays an image:

<template>
    <div>
        <img :src="image" />
    </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    image: String
  }
}
</script>

When I try to use this, and bind an image path:

<MyComponent
    image="./assets/image-test.png">
</MyComponent>

But it won't display the image.

What have I tried?

I tried replacing the code in the component to directly reference the image. If I do the following then the image does display:

<img src="@/assets/image-test.png" />

(Only with the @ symbol)

I've tried replacing the path that's bound to the component with:

image="@/assets/image-test.png">

But that makes no difference.

I found this answer, and so tried this:

<div>
    <img :src="getImage(image)" />
</div>

  methods: {
    getImage(path) {
      return require(path);
    }
  }

Inside the component. That results in an error at runtime:

Cannot find module './assets/image-test.png'

The full stack trace:

runtime-core.esm-bundler.js?5c40:217 Uncaught Error: Cannot find module './assets/image-test.png'
    at webpackEmptyContext (eval at ./src/components sync recursive (app.js:1080), <anonymous>:2:10)
    at Proxy.getImage (MyApp.vue?059c:17)
    at Proxy.render (MyApp.vue?059c:3)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:710)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4193)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4176)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4134)
    at processComponent (runtime-core.esm-bundler.js?5c40:4094)

I also tried that with the @ symbol.

Please could someone point me in the right direction on this. I realise that there's some quirk with Vue images (it says so on the linked post), but I'm at a loss as to how to persuade it to bind the image.

question from:https://stackoverflow.com/questions/65898322/bound-image-not-displaying-in-vue-project

Answer 1

The image should be required in the parent component and defined in the script section in order to be transpiled :

Parent

<template>
  <div id="app">
    <MyComponent :image="img" />
  </div>
</template>

<script>
import MyComponent from "./components/MyComponent.vue";

export default {
  name: "App",
  data: () => ({
    img: require("@/assets/logo.png"),
  }),
  components: { MyComponent },
};
</script>

MyComponent

<template>
  <div>
    <img :src="image" />
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  props: {
    image: String,
  },
};
</script>

^{if you place require in the template section you'll get an error like}

Error: /src/assets/logo.png hasn't been transpiled yet.