require引入资源时，资源路径为变量

1 场景：

<img src="" alt="" />

在vue项目中，使用img标签的src引入图片时，

1. 使用本地电脑图片的绝对路径（不能为相对路径），
2. 使用同源的网络图片，
3. 使用require(’./warning.png’)引入相对路径的图片

var icon='./warning.png'

那么如果让src中require一个变量，这个变量为图片路径的字符串，结果是报错不行的。

<img :src="require(icon)" alt="" />

2、初步解决

怎么解决这个不能require变量的问题？

使用模板字符串，在反引号``中用${}包裹变量，这样require就能使用了。

<img :src="require(`${icon}`)" alt="" />

但是这种方式只能使用同一文件夹内图片

3、使用函数

在编写组件时，父组件传过来自定义属性的图片路径（相对路径），在子组件中去require使用怎么实现。
图片路径是一个相对路径，而且是相对父组件的相对路径，那么对于子组件就不是一个正确的相对路径了，所以这个相对路径在子组件中不能使用。

父组件通过自定义属性传一个函数过来，在函数中引入图片，()=>require(’./warning.png’)

  props: {
    icon:{
       type: Function,
      default: ()=>require('./warning.png'),
    },
 }

使用时，执行这个函数

 <img :src="icon()" alt="" />