Как ссылаться на IMG в JavaScript в компоненте VUE, когда он загружен с JavaScript

Question

Структура файла (Webpack)

src
-assets
--img
---myimage.png
-vue
--page
---parent.vue
---component
----child.vue

parent.vue : Здесь я попытался src относительноэтот компонент и относительно дочернего компонента, где изображение будет фактически загружено.

/** This data is passed to the child component in a loop */
data(){
  return{
    items: [
      { id: 1, src: '../../../assets/img/myImage.png'},
      more items...
    ]
  }
}

child.vue : я получаю следующую ошибку в консоли: Ошибка в подключенном хуке: «Ошибка: не удается найти модуль» ../../../assets/img/myImage.png'"

props: {
  item: {
      type: Object,
      required: true
  }
},
mounted() {
  let element = this.$refs['myelement'];
  let img = new Image();

  img.onload = function(){
      element.insertBefore(this, element.firstChild);
  }
  img.src = require(this.item.src);
},

У меня естьперепробовал все возможные комбинации для src, я даже скопировал файл изображения в каталог компонентов и сослался на него как myImage.png и ./myImage.png, но появляется та же ошибка. Что происходит?

Answer 1

Какие бы изображения не помещались в src / assets, они перемещаются в static / img / imagename при сборке веб-пакета

Попробуйте получить прямой доступ к этим изображениям из браузера, используя URL-адреса, например localhost: 8080 / static / img / imagename.png

Если это доступно, перепишите массив только с именем файла изображения и добавьте / static / img