zoukankan      html  css  js  c++  java
  • Jmeter 发测试报告到邮箱,expand/collapse 图片不显示

    由于发送到邮箱中html文件是不包含expand/collapse 资源文件的,所以导致邮箱中这两个图片没有显示,解决方法有两种:

    1. 使用http能访问的图片链接地址

    1. 修改change中的图片资源
    function change(details_id) 
    {
            if(document.getElementById(details_id+"_image").src.match("http://ww1.sinaimg.cn/large/6fa4e58agy1fgki2i10o8j200g00g03i.jpg"))
            {
                document.getElementById(details_id+"_image").src = "http://ww1.sinaimg.cn/large/6fa4e58agy1fgkhzf6p25j200g00g03d.jpg";
                expand(details_id);
            }
            else
            {
                document.getElementById(details_id+"_image").src = "http://ww1.sinaimg.cn/large/6fa4e58agy1fgki2i10o8j200g00g03i.jpg";
                collapse(details_id);
            } 
    }
    
    1. 修改展示区域中的图片资源
    <td align="center">
            <a href="">
                <xsl:attribute name="href"><xsl:text/>javascript:change('page_details_<xsl:value-of select="position()" />')</xsl:attribute>
                <img src="http://ww1.sinaimg.cn/large/6fa4e58agy1fgki2i10o8j200g00g03i.jpg" alt="expand/collapse"><xsl:attribute name="id"><xsl:text/>page_details_<xsl:value-of select="position()" />_image</xsl:attribute></img>
            </a>
    </td>
    

    2. 将图片转换成base64

    1. 通过转换工具将图片转成Base64
    2. 修改change中的图片资源
    function change(details_id)
    {
            var _dataType=document.getElementById(details_id+"_image").getAttribute('data-type');
            if(_dataType=='expand')
            {
                document.getElementById(details_id+"_image").src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURSZ0pv///xB+eSAAAAARSURBVAjXY2DABuR/gBA2AAAzpwIvNQARCgAAAABJRU5ErkJggg==";
                expand(details_id);
                document.getElementById(details_id+"_image").setAttribute('data-type','collapse');
            }
            else
            {
                document.getElementById(details_id+"_image").src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURSZ0pv///xB+eSAAAAAWSURBVAjXY2CAAcYGBJL/AULIIjAAAJJrBjcL30J5AAAAAElFTkSuQmCC";
                collapse(details_id);
                document.getElementById(details_id+"_image").setAttribute('data-type','expand');
            } 
    }
    
    1. 修改展示区域中的图片资源
    <td align="center">
            <a href="">
                <xsl:attribute name="href"><xsl:text/>javascript:change('page_details_<xsl:value-of select="position()" />')</xsl:attribute>
                <img data-type="expand" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURSZ0pv///xB+eSAAAAAWSURBVAjXY2CAAcYGBJL/AULIIjAAAJJrBjcL30J5AAAAAElFTkSuQmCC" alt="expand/collapse"><xsl:attribute name="id"><xsl:text/>page_details_<xsl:value-of select="position()" />_image</xsl:attribute></img>				   
            </a>
    </td>
    
  • 相关阅读:
    在vue中使用pug
    【心无旁骛】vuex-simple
    Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'valid...
    【心无旁骛】vue-ts-daily
    Vuex持久化存储之vuex-persist
    canvas 水滴图、液体进度条、仿加速球、圆球水波图
    stackoverflow愚人节彩蛋效果
    Windows平台网站图片服务器架构的演进[转]
    SQL Server AlwaysOn架构及原理
    AlwaysON同步的原理及可用模式
  • 原文地址:https://www.cnblogs.com/jaychang/p/7008086.html
Copyright © 2011-2022 走看看