zoukankan      html  css  js  c++  java
  • <img>标签在vue中的使用

    定义和用法

    onerror 事件会在文档或图像加载过程中发生错误时被触发。

    在装载文档或图像的过程中如果发生了错误,就会调用该事件句柄。

    实例 加载缩略图

    <img :src="'/xxxx/downLitimg.do?xxxID='+xxxid" onerror="javascript:this.src='${sysHostUrl}/static/img/pdf_icon.png'">
    vue写法:src="'/xxxx/downLitimg.do?xxxID='+xxxid"  调后台接口
    加载缩略图失败后会去加载一张默认的图片:onerror="javascript:this.src='${sysHostUrl}/static/img/pdf_icon.png'"

    java后台代码:

    /**
    * 下载缩略图
    *
    * @param ArchiveDetailUUID
    */
    @GetMapping(value = "downLitimg.do")
    public void downLitimg(String ArchiveDetailUUID,String YearMonth, HttpServletRequest request, HttpServletResponse response) {
    try {
    AfdataLitimg entity=afdataLitimgService.find(ArchiveDetailUUID,YearMonth);
    if (entity != null && entity.getLitimgData()!=null && entity.getLitimgData().length>0) {

    response.setContentType("image/jpeg");
    OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
    toClient.write(entity.getLitimgData());
    toClient.flush();
    toClient.close();

    return;
    }else{
    System.out.println("图片加载没有数据C,getLitimgData=null"+ArchiveDetailUUID);
    return;
    }
    } catch (IOException ex) {
    System.out.println("图片加载异常D,"+ArchiveDetailUUID+"-----"+ex.getMessage());
    LogerHelper.WebLog(ex.getMessage());
    return;
    }
    }

    实际效果gif:

    
    
     
  • 相关阅读:
    maven的安装教程
    webstorm的中文教程和技巧分享
    WebStorm
    grunt配置任务
    grunt快速入门
    CSS简介
    浅介HTML DOM
    【转】计算机是如何启动的?
    【转】深入理解C++中public、protected及private用法
    【转】VS2013动态库文件的创建及其使用详解
  • 原文地址:https://www.cnblogs.com/time1997/p/12214750.html
Copyright © 2011-2022 走看看