SOURCE

const btn = document.querySelector("button");

btn.onclick = () => {
    const img = document.querySelector("img");
    img.getAttribute("src")
        ? img.removeAttribute("src")
        : img.setAttribute("src", "https://cdn.imgcn.top/20200619/8a27cb023aaeb6747e5057dfe4209d67.jpg!logo");
}

<img alt="美女">
<button>添加src</button>

img {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
    color: transparent; /*这里设置文字颜色是为了隐藏firefox下默认显示的alt*/
}

img::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0; /*这里的定位是为了覆盖chrome的占位符*/
    top: 0;
    width: 100%;
    height: 100%;
    background: #eee;
}

img::after {
    content: attr(alt);
    position: absolute;
    display: block;
    width: 100%;
    line-height: 2rem;
    text-align: center;
    bottom: 0;
    background: #444e;
    transform: translateY(100%);
    transition: transform .2s;
    color: #fff;
}

img:hover:after {
    transform: translateY(0);
}