Как правильно добавлять на страницу динамически созданное изображение?
 

Здравствуйте. Помогите пожалуйста решить следующую задачу. В приложении, написанном на Vue.js создаю img, затем пытаюсь добавить его на страницу, но у меня не выходит. Подскажите, что я делаю не так.

<template>
    <div>
        <div class="wrap" ref="wrap">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, animi aspernatur atque aut, corporis cumque dolore doloremque eaque earum eos error ex illum incidunt nostrum odio placeat quis vel voluptatem?
        </div>
    </div>
</template>
<script>
export default {
  mounted: function() {
    const img = new Image();

    img.src = '../assets/1.jpg';

    this.$refs.wrap.appendChild(img);
  }
}
</script>

Пробовал также следующим образом (В Network указывается не jpeg, а text/html)

<script>
export default {
  mounted: function() {
    // const image = document.createElement('img');
    let image = new Image()

    image.onload = function () {
      image.src = this.src
    }

    image.src = '../assets/1.jpg'

    this.$refs.wrap.appendChild(image)
  }
}
</script>