javascript - 加载javascript时如何在vue组件中引用javascript中的img

Question

File Structure (Webpack)

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

parent.vue : Here I tried src relative to this component and relative to the child component where the image will be actually loaded.

/** 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 : I get the following error in the console: Error in mounted hook: "Error: Cannot find module '../../../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 中，它都会在 webpack 构建时移动到 static/img/imagename

尝试使用 localhost:8080/static/img/imagename.png 等 url 直接从浏览器访问这些图像

如果可以访问，则只用图像文件名重写数组并在前面加上/static/img