SOURCE

console 命令行工具 X clear

                    
>
console
var eleButton = document.querySelector('button'),
    eleImg = document.querySelector('img');

if (eleButton && eleImg) {
    var initValueButton = eleButton.innerHTML;
    // 图片地址
    var srcImage = eleImg.getAttribute('data-src');
 		console.log(srcImage);
    // 移除该属性
    eleImg.removeAttribute('data-src');
    // 按钮点击事件
    eleButton.addEventListener('click', function() {
        if (this.innerHTML == initValueButton) {
            this.innerHTML = '移除src属性';
            // 图片显示
            eleImg.setAttribute('src', srcImage);
        } else {
            this.innerHTML = initValueButton;
            // src属性移除
            eleImg.removeAttribute('src');
        }
    });
}
<img  alt="一张图片" data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2259376396,2250852130&fm=27&gp=0.jpg"/>
<p><button>设置src属性显示图片</button></p>
img {
    display: inline-block;
    width: 256px; height: 192px;
    /* 隐藏Firefox alt文字 */
    color: transparent;
    position: relative;
    overflow: hidden;
}
img:not([src]) {
    /* 隐藏Chrome alt文字以及银色边框 */
    visibility: hidden;
}
img::before {
    /* 淡蓝色占位背景 */
    content: "";
    position: absolute; left: 0;
    width: 100%; height: 100%;
    background-color: #f0f3f9;
    visibility: visible;
}
img::after {
    /* 黑色alt信息条 */
    content: attr(alt);
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    line-height: 30px;
    background-color: rgba(0,0,0,.5);
    color: white;
    font-size: 14px;
    transform: translateY(100%);
    /* 来点过渡动画效果 */
    transition: transform .2s;
    visibility: visible;
}
img:hover::after {
    transform: translateY(0);
}