Question

该图像未出现在移动浏览器中。它确实显示在常规浏览器（PC）或检查元素（移动视图）上，但未显示在真实电话上。

有问题的图片：https://tomer.info/img/about/1.jpg

HTML：

> email      | first_name | group | group
> :--------- | :--------- | :---- | :----
> bob@co.uk  | bob        | g1    | 
> jane@co.uk | henry      | g2    | 
> jim@co.uk  | jim        | g1    | g2

CSS：

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

Answer 1

您为什么不替换它？

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

具有：

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

不要忘记将position: relative添加到.image_wrap类中，以便您的.main相对于父元素而不是整个页面保持绝对。

Answer 2

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

Answer 3

不确定是什么问题，但是当我在两个不同的设备（iPhone XR和Galaxy S9）上访问您的网站tomer.info时，将显示图像。当我转到您的小提琴页面时，它没有...但是我在小提琴上注意到，您有一些指向SVG的CSS，但我在HMTL中没有看到这可能会干扰您的某些样式。只是抬起头来。

Answer 4

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

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

我能想到的唯一原因是要处理响应图像问题或具有可以正确放置的背景图像。这两种情况都可以更好地与更清晰的语义HTML一起使用，并且可以访问。

1：使用响应图像

在这种情况下，您可以将picture标签与图像源集一起使用。这将允许您根据每个设备所需的大小交换图像，并为您提供一个可以放置的新元素。这样做的好处是您可以使用有效的后备，并且可以使用webp和jpg / png来增强性能。

2：需要一个新元素来定位

在这种情况下，我建议使用sudo选择器，例如::after或:: before。然后，您可以使用css将图像作为背景注入并放置在您喜欢的位置。这将解决可访问性问题，因为图像（我假设仅用于演示）将不再由辅助设备拾取。

有关更多信息，我建议您看看https://css-tricks.com/responsive-images-css/。这是响应式图像的一大败笔。

Answer 5

您可以使用像这样的普通图像：

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

或者您使用“ main”类在div内设置图像，如下所示：

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

Answer 6

您是否没有使用Media Queries使您的网站具有响应能力？如果不是，则应绝对使用它们。否则，如果您使用它们，则说明内部做错了什么，但我必须查看媒体查询以提供帮助。

图像未显示在移动设备上

6 个答案:

1：使用响应图像

2：需要一个新元素来定位