Level 75
First I don't use vue so is the colon correct? And try asset:
An example that works for me
<img src="<?php echo asset('img/imgdogs') . '/' . $row->dogpic; ?>" alt="">
Just plug asset into vue's syntax.
1 like
Aug 6, 2017
12
Level 1
Display image from laravel public folder in a vue component
It should be easy as pie but I can't get to public folder from my vue component. What is proper url? The src has 404 error.
<img :src="'/public/img/obr1.jpg'" >
Level 1
If someone doesn't know how to do this:
<img :src="'/img/obr1.jpg'" >
SRC is without {{}} or asset(). Don't forget colon.
18 likes
Level 4
@Ariandail Binding not necessary. just pass the image folder and file name followed by extension
1 like
Level 1
@Ariandail thanks a lot, this worked for me too...
Level 46
Don't use binding if you're just passing a string and not an expression, it's pointless. Just point the image tag at the source of the image.
2 likes
Level 13
new Vue({
el: '#app',
data: {
image_src: '/img/obr1.jpg',
}
});
<img :src="image_src">
6 likes
Level 1
@ARIANDAIL - thanks. it's working for me
Level 1
@ALENABDULA - works like a charm :-)
Level 1
@alenabdula's solution worked for me but I had to write the data property like this:
data() {
return {
image_src: '/images/obr1.jpg',
};
},
And also the folder structure in my case is slightly different so I had to use /images/ instead of /img/
Level 1
@ARIANDAIL - This works but it's not optimal if you need to use a variable. Also in Laravel with Vue 2.0 with the standard folder structure you should use this path:
'/images/name_of_file.png'
Level 1
@ARIANDAIL Thanks alot sir, It is working for me.
Level 8
@farhan12 I know this thread is old, but please select an answer.
Please or to participate in this conversation.