How to dynamically set an Image object src in javascript and Vue

Question

I'm trying to teach myself javascript and Vue.js. I was following the documentation on Vue's site and modifying their demonstrations as an exercise. I wanted to change their looping directive example to dynamically add images to the list from a specified url. I can't seem to get the image to show despite setting the image properties src field. I have verified that everything runs and the field is in fact getting set. I assume I must be misunderstanding something related to the DOM or ordering of events.

Thanks in advance.

HTML

<script src="https://unpkg.com/vue@next"></script>

<div id="list-rendering" class="demo">
  <input v-model="imgsrc"></input>
  <button v-on:click="setImage">  Set</button>
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }} {{todo.image}}
    </li>
  </ol>
</div>

CSS

.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}

Javascript

const ListRenderingApp = {
  data() {
    return {
      todos: [
        { text: 'Learn JavaScript',
          image: new Image(16,16)},
        { text: 'Learn Vue',
          image: new Image(16, 16)},
        { text: 'Build something awesome',
          image: new Image(16, 16)}
      ],
      imgsrc: ""
    }
  },
  methods:{
    setImage(){
       this.todos.map(todo => todo.image.src = this.imgsrc)
    }
  }
}

Vue.createApp(ListRenderingApp).mount('#list-rendering')

tony19 · Accepted Answer · 2022-07-15 21:55:56Z

2

When using v-for make sure to add :key. Docs

Also pay attention to your html elements. <img> & <input>.

Also return the result of .map() to this.todos. Docs

new Vue({
  el: "#app",
  data: {
    imgSrc: 'https://via.placeholder.com/150/FF0000',
    todos: [
      { text: "Learn JavaScript", image: 'https://via.placeholder.com/150/0000FF' },
      { text: "Learn Vue", image: 'https://via.placeholder.com/150/0000FF' },
      { text: "Play around in JSFiddle", image: 'https://via.placeholder.com/150/0000FF' },
      { text: "Build something awesome", image: 'https://via.placeholder.com/150/0000FF' }
    ]
  },
  methods: {
    setImage: function(todo){
        this.todos = this.todos.map(todo => ({ ...todo, image: this.imgSrc }))
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <small>image url</small>
    <input v-model="imgSrc" />
  </div>
  <br />
  <div>
    <button @click="setImage()">
      Click to set Image
    </button>
  </div>
  <ol>
    <li v-for="(todo, i) in todos" :key="i">
      <label>
          {{ todo.text }}
      </label>
      <img :src="todo.image" alt="img" width="100" height="100">
    </li>
  </ol>
</div>

try running this snippet & click the "Click to set Image"

edited Jul 15, 2022 at 21:55

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 26, 2021 at 2:14

Evan

2,5277 gold badges40 silver badges72 bronze badges

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

3 Comments

Painguy Over a year ago

Hi Evan, Thank you for your answer. While your answer does work I am more interested in understanding why my code is wrong. Could you elaborate on what you are doing correctly and what I am doing wrong. Also I always thought that :key with index is the default if the key is left unspecified instead of being given dynamic data. Can I not use the image object unless I directly add via direct DOM manipulation?

Evan Over a year ago

@Painguy To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item.

Evan Over a year ago

there are couple of problems in your code, in HTML5 <input> dont really have closing tag. also add url at <img> if you want to display the image.

Strid3r21 · Accepted Answer · 2021-12-26 02:05:51Z

0

try this.   

<div id="list-rendering" class="demo">
      <input v-model="imgsrc"></input>
      <button v-on:click="setImage">  Set</button>
      <ol>
        <li v-for="(todo, index) in todos :key="index"">
          {{ todo.text }} 
          <img :src="todo.image"/>
        </li>
      </ol>
    </div>

answered Dec 26, 2021 at 2:05

Strid3r21

3272 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to dynamically set an Image object src in javascript and Vue

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related