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

做 demo 的过程中，用父组件通过 props 向子组件传图片路径的时候，一开始在 data 中直接使用字符串，但路径传入子组件之后，图片无法显示。

data(){
  src: '../assets/img/kass.png'
}

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

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

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

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

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

data(){
  src: require('../assets/img/kass.png')
}

• 问题出现的原因：
  1.图片资源在 assets 文件夹中
  2.没有试用引用模块语法
• 解决方法：
  1.在传值的时候使用 require() 函数引入资源
  或者
  2.在接收值的时候使用 require() 函数引入资源