vue js display selected img using v-bind:src

Question

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" />

raina77ow · Accepted Answer · 2021-07-02 00:18:51Z

1

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>

edited Jul 2, 2021 at 0:18

answered Jul 1, 2021 at 23:50

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

2 Comments

Vzupo Over a year ago

still doesnt display the image

raina77ow Over a year ago

Is there any network request going out when choosing a different option? Just trying to understand whether or not model is properly connected here to imgsrc. Can you add some text output to span to check that path itself is assigned correctly?

Fennec · Accepted Answer · 2021-07-02 04:19:11Z

0

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" ... />

answered Jul 2, 2021 at 4:19

Fennec

1,97217 silver badges31 bronze badges

Collectives™ on Stack Overflow

vue js display selected img using v-bind:src

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related