How do I pass an image location to a child component in Vue?

Question

I can't get my image to show up for some reason. The path of the image should be sent to the component and rendered there. But it just doesn't render. I believe I am using the Vue-CLI if that helps.

This is my folder structure:

src | App.vue | bulbasaur.png | /components | Pokemon.vue

App.vue

<template> <div id="app"> <Pokemon location="./bulbasaur.png"/> </div> </template> <script> import Pokemon from './components/Pokemon.vue' export default { name: "app", components: { Pokemon } }; </script> <style> </style>

Pokemon.vue

<template> <div> <img :src="`${location}`" /> </div> </template> <script> export default { name: 'Pokemon', props: { location: String } }; </script> <style scoped> </style>

Are you getting any error in console or network tab due to image path is not correct, etc? — palaѕн
– palaѕн, Commented Jun 22, 2020 at 3:59
No, there is no error. The element is created as: <img data-v-3848655a="" src="./bulbasaur.png"> but only a broken image link is displayed. — Taylor Liss
– Taylor Liss, Commented Jun 22, 2020 at 4:01
Can you try once to put the images into public folder instead like this: html-and-static-assets — palaѕн
– palaѕн, Commented Jun 22, 2020 at 4:04
Please read the docs fully. In templates, you will need to first pass the base URL to your component. Then you can use it like: <img :src="${publicPath}my-image.png"> — palaѕн
– palaѕн, Commented Jun 22, 2020 at 4:16
Ah, thank you! I finally got it working! I had to add data () {return {publicPath: process.env.BASE_URL} in my export default and then it worked! Thanks! — Taylor Liss
– Taylor Liss, Commented Jun 22, 2020 at 4:30

nenchev · Accepted Answer · 2021-12-04 11:54:25Z

First, create an image prop in your child component:

props: { image: { type: String, default: "" } } ...

Add the img tag in the child component:

<img :src="image" />

Import the image in the parent component:

import MyImage from '../path/to/my/image';

For Vue3, make sure to provide the loaded image to the template:

setup() { return { MyImage }; }

For Vue2, you can add it in your data section:

data() { return { MyImage: MyImage }; }

Then just pass the image to your child prop:

<child :image="MyImage" />

Collectives™ on Stack Overflow

How do I pass an image location to a child component in Vue?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related