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的过程中,由于不了解源码,自己挖的坑还是挺多的,慢慢爬了。。。

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

讨论数量: 0

慎思笃行