el-image无法显示从本地服务器请求的图片——原因之一及解决办法

一. 需求

在一个页面上，需要根据服务器返回的类型参数（parameterType）来显示不同的图片内容。例：当parameterType值为0时，

页面需要显示XXX证书；当parameterType值为1时，页面需要显示XXX信息照片。

二. 代码部分

// template里面
<div>
  <div v-if="userInformation.parameterType === 0">
    <el-row type="flex">
	  <el-col :span="12" class="doctor_img">
		<p>XXX证书</p>
		<el-image v-if="userInformation" lazy :src="userInformation.practiceCard" :preview-src-list="srcList" style="width: 100px; height: 100px"></el-image>
	  </el-col>
	</el-row>
  </div>
       
  <div v-else>
    <el-row type="flex">   
	  <el-col :span="12" class="doctor_img">
	    <p>XXX信息照片</p>
		<el-image v-if="userInformation" lazy :src="userInformation.idcardFace" :preview-src-list="srcList" style="width: 100px; height: 100px"></el-image>
	  </el-col>
	</el-row> 
  </div>
</div>

上面:src绑定的变量的值 = 本地服务器ip及端口 + 服务器返回的图片路径
例 userInformation.practiceCard = 'http://192.168.0.95:8000' + '/resources/vertical/8bdc061d-6101-4665-8ae2-22fa81b7c302.jpg'

三. 效果如下：

1.userInformation.parameterType === 0 时

2.userInformation.parameterType === 1 时

四. 分析原因

4.1 发现图片都无法显示，在确认本地服务器端口及图片路径没拼接错误的情况下，我在浏览器输入地址

http://192.168.0.95:8000/resources/vertical/8bdc061d-6101-4665-8ae2-22fa81b7c302.jpg，是能拿到图片的：

询问一位老哥后，说可能是我的el-image标签少写了某个属性或者嵌套方式不对，在查询了element-ui官方文档后发现el-image的

外层需要嵌套一个标签，如下图：

于是我给XXX证书里面的el-image嵌套上标签<div class="demo-image__preview"></div>，查看了下发现图片正常显示了：

但是当我将两个地方都嵌套上标签时就出现了问题：

<div>
  <div v-if="userInformation.parameterType === 0">
    <el-row type="flex">
	  <el-col :span="12" class="doctor_img">
		<p>XXX证书</p>
		<div class="demo-image__preview"> // XXX证书中嵌套的标签
		  <el-image v-if="userInformation" lazy :src="userInformation.practiceCard" :preview-src-list="srcList" style="width: 100px; height: 100px"></el-image>
		</div>
	  </el-col>
	</el-row>
  </div>
       
  <div v-else>
    <el-row type="flex">   
	  <el-col :span="12" class="doctor_img">
	    <p>XXX信息照片</p>
	    <div class="demo-image__preview"> // XXX信息照片中嵌套的标签
		  <el-image v-if="userInformation" lazy :src="userInformation.idcardFace" :preview-src-list="srcList" style="width: 100px; height: 100px"></el-image>
		</div>
	  </el-col>
	</el-row> 
  </div>
</div>

效果如下：

在我只给XXX证书里面的el-image套上外层标签时，XXX证书里面的图片是可以正常加载的，但是两个都加上的时候两个都无法

显示了。

五. 解决办法

5.1 考虑了下，XXX信息照片要想显示，就要通过v-else。而其他标签和属性都是按照官网来的，那么问题的原因很有可能就出

在v-else上面。因为有条件可以限制，于是我将v-else改为了v-if+条件：

<div>
  <div v-if="userInformation.parameterType === 0">
    <el-row type="flex">
	  <el-col :span="12" class="doctor_img">
		<p>XXX证书</p>
		<div class="demo-image__preview">
		  <el-image v-if="userInformation" lazy :src="userInformation.practiceCard" :preview-src-list="srcList" style="width: 100px; height: 100px"></el-image>
		</div>
	  </el-col>
	</el-row>
  </div>
       
  <div v-if="userInformation.parameterType === 1">
    <el-row type="flex">   
	  <el-col :span="12" class="doctor_img">
	    <p>XXX信息照片</p>
	    <div class="demo-image__preview">
		  <el-image v-if="userInformation" lazy :src="userInformation.idcardFace" :preview-src-list="srcList" style="width: 100px; height: 100px"></el-image>
		</div>
	  </el-col>
	</el-row> 
  </div>
</div>

经过多次测试，发现两张图片都能正常显示了，并且就算没有给el-image嵌套外层标签，图片依然能正常显示。效果如下：


5.2 element-ui在源码封装功能的时候少不了使用vue中的方法，猜测el-image在源码中也用了v-if和v-else的条件判断，所以我在

给el-image的外层标签直接加v-else的时候可能与源码有了冲突。

5.3 需要强调的一点是，从服务器拿到的图片数据不能直接使用，需要拼接本地服务器的ip+端口才行。当然如果你的图片不是从

本地服务器获取，而是直接放在本地，那么可能就需要加require了。

六. 结尾

使用element-ui的过程中，由于不了解源码，自己挖的坑还是挺多的，慢慢爬了。。。

以上如有说的不对的地方，还望各位兄台不吝指出，谢谢啦