在移动设备上获取损坏的图像

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

}

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

目前已完成的故障排除：

确保 <meta name="viewport" content="width=device-width, initial-scale=1"> 在场
从<h1>元素中取出<img>标签，还是没有出现。还把图片移到了 headerwrap 之外，还是什么都没有
删除了关于 @media (max-width..)
的大部分 CSS
在 PC 上打开页面，并将分辨率更改为与我的相同 phone，结果是图像 DID 出现了
在我的 phone 上查看了桌面视图中的页面，但没有显示。

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

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

在移动设备上获取损坏的图像

Getting broken image on mobile

html

css

image

media-queries

responsive