Image in VueJS component is not loading

Question

I got a parent component which sends a data object to the children component like this:

<child object-data=" url: 'url here', title: 'Title'"></child>

Then on my children component, I get this object data by doing:

<script> export default { props: [ 'objectData' ] } </script>

Now, for some reason, I can use title without any problem like this {{ objectData.title }} and shows up.

But when it comes to the URL inside an img tag it's not rendering the image.

I attempted doing the following:

<img :src="objectData.url"/> <--- not rendering

<img v-bind:src="objectData.url"/> <--- not rendering

<img v-bind:src="require(objectData.url)"/> <-- throws a warning error because it's not a path but an object I guess.

<img v-bind:src="{objectData.url}"/> <--- throws an error

<img v-bind:src="{{objectData.url}}"/> <--- throws an error

When I check on the dom element, it doesn't even contain a src attribute afterwards.

If I write down the URL without an object, it works.

<img v-bind:src="src/assets/images/icon.png"/>

But I want my URL to come from a parent component.

Any ideas on how to solve this? I added the url-loader on my webpack file:

 { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader' }

I also attempted returning objectData.url from a computed/methods fuction:

computed: { getImageUrl: function() { return objectData.url; } }

And then use it like :src=“getImageUrl” or :src=“{{getImageUrl}}” and I wasn’t lucky either.

Yes i faced the same issue before, and i didn't search a solution, but when i use url like https://picsum.photos/500/300?image=5 it works fine — Boussadjra Brahim
– Boussadjra Brahim, Commented Dec 8, 2018 at 13:00
@BoussadjraBrahim oh i have to check but yes, although my images will be stored for instance in my cdn, so that works as an external url... but there has to be a way to make this work for testing purposes haha — msqar
– msqar, Commented Dec 8, 2018 at 13:06
yes i'm agree with you and i have opened that project to find a solution using images stored in assets folder — Boussadjra Brahim
– Boussadjra Brahim, Commented Dec 8, 2018 at 13:12
When you examine the element on the rendered page, what is its src set to? Is it correct? — Roy J
– Roy J, Commented Dec 8, 2018 at 14:04

Boussadjra Brahim · Accepted Answer · 2018-12-08 15:16:54Z

I faced the same issue and i fixed it by using require function :

in the parent component App.vue :

<carousel-posts :posts="posts" /> export default { name: "app", data() { return { posts: [ { img: require("./assets/logo.png"), title: "Title 1", subTitle: "Sub Title 1", body:"lorem ipsum ..." } ... ] }; } ... }

in the child component i loop through the posts and bind the image src as follows :

 <div class="card-body" v-for="(post,idx) in posts" > <img class="card-img" :src="post.img" /> ... </div> <script> export default { props: ["posts"], ...

So in your case you should have something like :

 <child :object-data="objectData"></child> ... data(){ return{ dataObject:{ url: require('./assets/someimg.png'), title: 'Title' } } }

Update :

my project tree :

 src |_assets | |_logo.png |_components | |_CarouselPosts.vue |_App.vue

i will try it out in a couple minutes whenever i get home! thanks for the answer.
you're welcome, it works for me i hope that could work for you
I'm getting a: Module not found: Error: Can't resolve 'src/assets/images/image.png' in 'somepath'. Seems that the require('') is not resolving the path to my image. Any idea?
if the parent component is located in the same level of assets folder in the project structure you should use ./assets/images/image.png
you're welcome and thanks to you because you call my attention to that

Amin Ariana · Accepted Answer · 2020-06-30 20:32:51Z

Two alternatives:

Static links that vue resolves. But they're src-based and don't work with webpack / file-loader:

<img :src="'../assets/filename.png'"/>

Works with webpack. Note the ".default" at the end:

<img :src="require('../assets/filename.png').default"/>

Documentation relevant effective Nov 2019: https://github.com/vuejs/vue-loader/issues/1612

Collectives™ on Stack Overflow

Image in VueJS component is not loading

2 Answers 2

12 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Linked

Related