I am facing an issue with a component that is supposed to display an image:
<template>
<div>
<img :src="image" />
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
image: String
}
}
</script>
Even though I try to bind an image path like this:
<MyComponent
image="./assets/image-test.png">
</MyComponent>
The image does not display.
What steps have I taken so far?
I attempted to modify the code within the component to directly reference the image. In doing so, the image actually displayed:
<img src="@/assets/image-test.png" />
(Only with the @ symbol)
I experimented by changing the bound path in the component to:
image="@/assets/image-test.png">
However, this change had no effect on the outcome.
After finding this answer, I tried implementing the following:
<div>
<img :src="getImage(image)" />
</div>
methods: {
getImage(path) {
return require(path);
}
}
within the component. Unfortunately, this resulted in a runtime error:
Cannot find module './assets/image-test.png'
The complete stack trace of the error was:
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 even tried using the @ symbol in this approach.
If anyone could provide guidance on how to resolve this issue, I would greatly appreciate it. It seems there may be a specific way Vue handles images causing this problem, as mentioned in the linked post, but I am struggling to figure out how to correctly bind the image.