vue中父组件向子组件传路径的问题

做 demo 的过程中,出现了在用父组件通过 props 向子组件传图片路径的时候,在 data 中直接使用字符串,但路径传入子组件之后,图片无法显示的问题。

1
2
3
4
data(){
src: '../assets/img/kass.png'
}
<img :src="src" />

查阅资料之后,找到了问题的原因,关于 Webpacked 对 Assets 文件夹里。

在 *.vue 组件中,所有模板和 CSS 都会被 vue-html-loader 及 css-loader 解析,并查找资源 URL。例如,在 src=”./logo.png”和 background: url(./logo.png) 中,”./logo.png” 是相对的资源路径,将由 Webpack 解析为模块依赖。

从这段话可以看出 webpack 将静态资源解析为模块依赖,所以要使路径可用,就要使用引用模块的语法,es6的语法标准为 import,CommonJS 规范为 require,但两者也有区别。

require是运行时调用,所以require理论上可以运用在代码的任何地方
import是编译时调用,所以必须放在文件开头

所以使用 require 即可解决问题。

1
2
3
data(){
src: require('../assets/img/kass.png')
}
  • 问题出现的原因:
    1.图片资源在 assets 文件夹中
    2.没有试用引用模块语法
  • 解决方法:
    1.在传值的时候使用 require() 函数引入资源
    或者
    2.在接收值的时候使用 require() 函数引入资源
本文结束,感谢阅读,如果对您有所帮助,不妨打赏支持一下!