I am trying to develop a SPA. In this regard I am using vue.js 2 in front end and Laravel 5.5 API in back end. Now I would like to display images in front end. I wrote below code in HTML
<img :src="/images/addressObj.image"/>
Where should I put images in Laravel and how can I access that image in vue.js ?
the issue here it's that you are not using properly the :src attr, :src spects a string as value, don't let the double quotes confuse you, between the double quotes you have to place your formatted string, notice that if use :src="www.google.com/size" the img will try to find the url www.google.com/size instead www.google.com/350x150 or if you try www.google.com/{{size}} the img will try to find www.google.com/%7B%/Bsize%7D%7D (size it's a var that comes from the example below)
new Vue({
el: '#app',
data() {
return {
size: '350x150',
size2: '350x400'
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<button @click="size = '350x150'">Size 350x150</button>
<button @click="size = '350x200'">Size 350x200</button>
<!-- notice the single quotes -->
<img :src="'http://via.placeholder.com/' + size" />
<hr />
<button @click="size2 = '350x400'">Size2 350x400</button>
<button @click="size2 = '350x300'">Size2 350x300</button>
<!-- here with string interpolation -->
<img :src="`http://via.placeholder.com/${size2}`" />
</div>Assuming that is a .vue or .js file,
<img :src="`/images/${addressObj.image}`"/>
I assume that you have correctly done the necessary stuff for the variable addressObj.
well, as u have dynamic source binding, u have to require each image.
so u just should do like that:
<img :src='require(`./images/${addressObj.image}`)'>
addressObjthe variable in Vue instance?