0

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 ?

2
  • 1
    is addressObj the variable in Vue instance? Commented Mar 3, 2018 at 13:43
  • yes. I edited the question. Thanks. Commented Mar 4, 2018 at 3:50

3 Answers 3

2

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>

Sign up to request clarification or add additional context in comments.

Comments

0

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.

7 Comments

Thanks @Ru Chern Chong. I edited the question. Thanks.
Thanks @Ru Chern Chong. Where should I put images in Laravel ?
I have no idea why you want to do there. Use the Laravel Storage helper?
Thanks. I didn't use Laravel Storage helper.
Go with that. I think it’s really useful and easy to implement. If you’re using AWS, they have the integration already albeit your client secrets.
|
0

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}`)'>

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.