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

Posted 2023-02-23

【中文标题】加载javascript时如何在vue组件中引用javascript中的img

【英文标题】：How to reference img in javascript in a vue component when it is loaded with javascript

【发布时间】：2020-02-08 21:44:51

【问题描述】：

文件结构（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 一样引用它，但出现了同样的错误。 怎么回事？

【参考方案1】：

当 webpack 构建时，无论放在 src/assets 中的任何图像都移动到 static/img/imagename 中

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

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

【讨论】：

不，没有用。这确实有效：http://localhost:8080/src/assets/img/myImage.png

它不会以这种方式工作。在 webpack 中捆绑后，所有资产都被移动到静态文件夹中。您可以通过localhost/static/img/myImage.png

从那里访问

这就是问题所在，我无法捆绑它，我得到错误：挂载钩子中的错误：“错误：找不到模块'../../../assets/img/ myImage.png'"