如何在使用 JavaScript 加载的 Vue 组件中引用图片？

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 ：控制台显示以下错误：在挂载钩子中出现错误："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，但是出现了相同的错误。发生了什么？

- StudentX

Answer 1

无论将图像放置在src/assets中，当webpack构建时，它们都会被移动到static/img/imagename中。

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

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

- chans

---

不，它没有起作用。这个可以：http://localhost:8080/src/assets/img/myImage.png。 - StudentX

它不会以那种方式工作。在webpack捆绑后，所有资产都移动到静态文件夹中。您可以通过http://localhost/static/img/myImage.png从那里访问。 - chans

那就是问题所在，我无法打包它，我收到了错误信息：挂载钩子中的错误：“错误：找不到模块'../../../assets/img/myImage.png'”。 - StudentX