一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。
elemenUI 中的图片组件 <el-image />，大家都应该用过了，其 src 属性的值为图片的地址，一般是图片的URL地址，比如像下面这样：
const url = 'https://www.test.com/e/a.jpeg';
像上面的这种网络图片，我们直接赋值给 src 属性就可以正常显示了，但是有时候我们会需要引用本地的图片。
在原生的 <img /> 标签中，我们是这样写的（假设引用assets目录下的img.jpeg图片）：
<img src="../assets/img.jpeg" />
但是在 <el-image /> 组件中，直接这样写却是行不通的，比如下面这样：
<el-image style="width: 540px; height: 225px" src="../assets/img.jpeg" />
为什么呢？打开控制台可以看到报错信息
可以看到，在原生 <img /> 标签中，其 src 属性是以文件所在目录为起点的，而在 组件<el-image /> 中则是以根目录为起点的。所以要把代码改成下面这样，就可以正常显示了。
<el-image style="width: 540px; height: 225px" src="src/assets/img.jpeg" />
除了上面这种写死的，更多的时候，我们更常用的是动态的图片路径，比如说作为组件的属性，从父组件传递进来，或者说通过接口从后台获取。
我们尝试一下，给子组件Demo定义一个imgPath属性，然后再根组件中引用Demo组件并给其imgPath属性赋值，如下：
<!--父组件-->
<Demo img-path="src/assets/img.jpeg"/>
<!--子组件-->
<el-image style="width: 540px; height: 225px" :src="imgPath" />
然后发现，图片并未能像我们所想的那样显示出来，而是在控制台中报了这个错。
仔细看，发现错误中的路径并没有什么问题，但是为什么不显示呢？这个我也不知道，但是我们可以通过使用 required() 来解决。
比如说一开始的时候，我们直接给 <el-image /> 标签的 src 属性赋值 '../assets/img.jpeg' 是不行的，因为它的起点是根目录，但是如果我们换成下面这种写法就可以了：
<el-image style="width: 540px; height: 225px" :src="require('../assets/img.jpeg')" />
然后，我们也可以把父组件传递过来的图片路径放进去，像下面这样：
<el-image style="width: 540px; height: 225px" :src="require(imgPath)" />
结果打开，发现图片未显示，控制台报错:
哦，原来 require 中是不能直接使用变量做参数的，所以像 require(imgPath) 这种写法是错误的，那要怎么办呢？ 我们可以通过拼接字符串做参数来解决，什么意思呢，就是刚开始我们在父组件中是把图片的整个路径给传递进来了，但是现在不这样做了，我们只传个图片名称，然后在 require 中把完整路径拼接出来，像下面这样：
<el-image style="width: 540px; height: 225px" :src="require(`../assets/${imgPath}.jpeg`)" />
就可以正常显示了。
