在手机上获取损坏的图像

Question

我目前在我的网站上有一个响应式图像，当我在移动浏览器上查看它时，我得到一个损坏的图标 （注意：在 PC 上以响应式视图查看有效！）

HTML：

    <div id="headerwrap">
    <header class="clearfix">
        <div class="container">
            <h1><img src="assets/img/headerImage.png"></img></h1>
            <p>Welcome to the site!</p>
        </div><!-- /container -->
    </header>       
</div><!-- /headerwrap -->

CSS：

@media (max-width: 979px) {
#headerwrap {
    margin-top: -120px;
    padding-top:140px;
    }

#headerwrap h1 {
    font-size: 50px;
    line-height: 60px;
    letter-spacing: 2px;
    }


#headerwrap p {
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 3px;
    }
}

@media screen and (max-width: 30.6em) { 

.cbp-qtrotator {
    font-size: 70%;
}

.cbp-qtrotator img {
    width: 80px;
}

}

当我加载页面时，图像加载，然后在一两秒后切换到损坏的链接。每次刷新页面时都会发生这种情况。

到目前为止已完成故障排除：

• 确保<meta name="viewport" content="width=device-width, initial-scale=1"> 存在

• 从<h1> 元素中取出<img> 标签，仍然没有出现。还把图片移到了headerwrap之外，还是什么都没有

• 删除了大部分关于@media (max-width..)的CSS

• 在PC上打开页面，把分辨率改成和我手机一样，结果还是显示了图片

• 在我的手机上以桌面视图查看页面，但没有显示。

  如果有人能想到我在这里缺少的东西，我将不胜感激！

Answer 1

根据@hellojebus，我在后台运行的脚本正在更改图像的src。

而不是 img src 显示为：

<h1><img src="assets/img/headerImage.png"></img></h1>

它加载为：

<h1><img src="assets/img/headerImage@2x.png"></img></h1>

导致 404

再次感谢@hellojebus