移动设备上的图片无法显示

Question

这个图片在移动设备的浏览器中无法显示。它可以在普通浏览器（电脑）或检查元素（移动视图）中显示，但它不能在真正的手机上显示。

HTML：

<div class="image_wrap">
        <img src="img/about/600x600.jpg" alt="" />
        <div class="main" data-img-url="img/about/1.jpg"></div>
</div>

CSS（层叠样式表）：

.tomer_tm_hero_header_wrap .image_wrap{
    width: 200px;
    height: 200px;
    display: inline-block;
    margin-bottom: 38px;
    position: relative;
}
    .tomer_tm_hero_header_wrap .image_wrap .main{
        position: absolute;
        top: 8px;
        bottom: -8px;
        left: 8px;
        right: -8px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 100%;
    }
    .tomer_tm_hero_header_wrap .image_wrap img{
        min-width: 100%;
        border-radius: 100%;
        border: 8px solid rgb(227, 135, 45);
    }

- Tom S

---

它出现在Chrome工具中（iPhone X兼容视图） - Horatiu Jeflea

我正在使用手机版的Chrome。它在使用Chrome工具时会显示出来，但在手机上不会显示。 - Tom S

如果您在移动设备上尝试，它实际上不会显示出来。但是它会出现在Chrome工具中。这很奇怪。 - Tom S

@Maske13，您是否尝试在不同的移动设备上以及相同或不同的网络上进行测试？尝试使用WiFi和移动数据了吗？我想知道问题是否特定于您的设备。 - Frank Furter

你在图片出现之前有去过网站吗？你尝试过彻底清除手机浏览器历史记录、Cookie、缓存或在隐身/私密窗口中尝试吗？ - Drewskis

Answer 1

为什么不替换它：

<div class="main" data-img-url="img/about/1.jpg"></div>

使用：

<img class="main" src="img/about/1.jpg" alt="me" />

别忘了在.image_wrap类中添加position: relative，这样你的.main就会相对于父元素而不是整个页面保持绝对定位。

- Marco Escaleira

---

我认为这与问题无关，但还是谢谢！ - Tom S

Answer 2

尝试在CSS中使用background: url(img/about/1.jpg)，而不是使用data-img-url，在.tomer_tm_hero_header_wrap .image_wrap .main中。

- Miosotaa

Answer 3

不确定问题出在哪里，但当我在两个不同的设备（iPhone XR和Galaxy S9）上访问您的网站tomer.info时，您的图像会显示出来。但是当我访问您的fiddle页面时，它没有显示...然而，我注意到在fiddle上，您有一些指向SVG的CSS，而我在您的HTML中没有看到这一点，这可能会影响您的某些样式。提醒一下。

- MBri

Answer 4

这是对Marco Escaleira提供答案的补充。

我不确定您使用带有data-img-url的div想要实现什么目的？您是否使用JS将div替换为有效的HTML元素？如果是，我们需要查看呈现的HTML。如果不是，请参见下面的答案。

我能想到的唯一原因是处理响应式图像问题或具有正确定位的背景图像。这两种情况都可以使用更干净、更语义化的HTML来更好地服务，并且它们将变得可访问。

1：使用响应式图像

在这种情况下，您将使用带有图像源集的picture标记。这将允许您根据每个设备所需的大小交换图像，并为您提供一个新元素，您可以对其进行定位。这样做的好处是您获得了一个工作回退并且可以使用webp和jpg / png进行性能增强。

2：需要新元素进行定位

在这种情况下，我建议使用伪选择器，例如::after或::before。然后，您可以使用CSS将图像注入为背景，并将其定位在所需位置。这将解决无障碍问题，因为辅助设备不再会捕获图像（我假设该图像仅用于展示）。

有关更多信息，我建议查看https://css-tricks.com/responsive-images-css/。这是一个关于响应式图像的很好的概述。

- Mike Freeman

Answer 5

你的网站没有使用媒体查询来实现响应式设计吗？如果没有，你一定要使用它们。否则，如果你已经在使用媒体查询，但出现了问题，我需要看一下媒体查询才能帮助你。

- spencebuko