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.

Is the image already hosted on the server in the /assets directory? Or is this to be processed through a build pipeline such as Webpack? — Eliott Robson
– Eliott Robson, Commented Jan 29, 2021 at 11:22
It's already hosted on the server - which in this particular case is my desktop right now — user12585721
– user12585721, Commented Jan 29, 2021 at 13:35
Did you try to give the path of the image like <img src="../../assets/image-test.png"> ? — onuriltan
– onuriltan, Commented Jan 29, 2021 at 14:40

Boussadjra Brahim · Accepted Answer · 2021-01-30 12:20:40Z

1

+100

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.

answered Jan 30, 2021 at 12:20

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

Bound image not displaying in Vue project

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related