CODEWITHSUNDEEP
vue.js
Vzupo
Vzupo

Reputation: 1468

vue js display selected img using v-bind:src

I have a an object is being displayed in a select menu. I am simply trying to bind the selected image to the screen. Not sure what I should display inside of the :src="". Can someone please let me know what needs to be added

<select>
  <optgroup v-for="[folder, files] in filteredList" :label="folder">
    <option v-for="img in files" :value="img.path">{{img}}</option>
  </optgroup>
</select>


<span>image here: </span> <img v-bind:src="img in files" width="150" height="150" />

Upvotes: 1

Views: 96

Answers (2)

Fennec
Fennec

Reputation: 1882

Had the same problem, sometimes vue doesn't update the image when the src change, try add a key to the img element

// Quick fix
<img :key="selectedPath" :src="imgSourceValue" ... />

Upvotes: 0

raina77ow
raina77ow

Reputation: 106385

You have to bind <select> form control with a model (as choosing any option in your current code doesn't change anything from Vue perspective):

<select v-model="selectedPath">
  <optgroup>...</optgroup>
</select>

Do not forget to define this model in data section of your component/app. Then you can use value of this model in v-bind: src expression.

<img v-bind:src="selectedPath" width="150" height="150" />

And here's a snippet illustrating all of this in action:

new Vue({
  el: '#app',
  data: {
    selectedPath: '',
    files: [
      { path: 'https://i.sstatic.net/is3wI.png?s=64.jpg', title: 'Bee' },
      { path: 'https://i.sstatic.net/kONSg.jpg?s=64', title: 'Circle' },
    ]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="selectedPath">
    <option v-for="img in files" :label="img.title" :value="img.path">{{img}}</option>
  </select>
  <br />
  <img v-bind:src="selectedPath" width="100" />
</div>

Upvotes: 1

Related Questions