在移动设备上破坏图像

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;
}

}

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

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

• 确保<meta name="viewport" content="width=device-width, initial-scale=1">存在
• 从<img>元素中取出<h1>标记，但仍未显示。同时将图片移到headerwrap之外，仍然没有
• 删除了有关@media (max-width..)
的大部分CSS
• 在PC上打开页面，并将分辨率更改为与我的手机相同，结果是图像DID显示

• 在手机的桌面视图中查看了该页面，但没有显示。

  如果有人能想到我在这里失踪的东西，我真的很感激！

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