vue动态加载图片问题

Posted 2021-09-08 ￡漫步 云端彡

问题描述：

vue加载图片时，如果想加载的图片无法拖动，则使用conten进行添加。如果图片路径是动态加载的。则必须加上require；此时就出现一个问题，require参数必须是一个静态字符串。图片路径是动态加载的。怎么才能保证图片可以加载进去呢？

@Override
        public void run() {
            bytes = mmInStream.read(buffer);
            mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();
        }

---

解决

<el-image :style="{width: '50px',height: '50px',
content:'url(' + (scope.row.applicationIcon.indexOf('default')!=-1
?require('../../assets/images/'+scope.row.applicationIcon):'softwareManage/application/picShow?picName='+scope.row.applicationIcon) + ')'}">
  <div slot="error" style="width: 100%;height: 100%;">
    <i class="el-icon-picture-outline" style="font-size: 50px;font-weight: 100;"></i>
  </div>
</el-image>

上面的代码就是解决方法，scope.row.applicationIcon是传入的路径，如果包含default表示默认图片，使用require导入，此时applicationIcon只是图片名称，例：default.png。否则applicationIcon是一个上传的图片，此时通过后端请求获取图片。这里重点说明require，此时传入图片不能连路径传入，需要把路径写死，只传入图片名才能正常显示