是什么阻止了此 JPG 图像在 HTML/CSS 中的工作？

Question

我有这张 JPG 图片，我想在 CSS 中将其用作 div 容器的 background-image。我尝试过的所有不同图像都可以工作，但这一张不会在视口中呈现。如果我去检查元素，当我将鼠标悬停在元素 URL.

上时，它会显示缩略图

我已经尝试了所有方法，包括：

把它放在一个 img 标签中并给它一个静态 height/width
正在将其转换为 png 和 svg'
正在压缩
抓取元数据
在不同的 HTML/CSS 文件中使用它

import image from "./image.jpg";

//using React.js

<img src={image} className="image"/>//<-- doesnt work in img as src
<div className="imageBg"></div> //<-- doesnt work in div as bg

.image {
  height: 100px;
  width: 100px;
}

.imageBg {
  height: 100px;
  width: 100px;
  background-image: url("./image.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

罪魁祸首：（它只是一个在 photoshop 中编辑的 2000x2000 729KB .jpg 模型图像）

这张图片有问题吗？

Answer 1

图像损坏的可能性很高，请尝试在任何编辑软件（photoshop，甚至系统默认应用程序）中进行小的编辑并再次保存并尝试使用它！您也可以简单地截取它并尝试在您的代码中使用它

如果不行，你可以在你的src中使用这个link https://i.stack.imgur.com/LGYHM.jpg作为字符串，这是上传到Whosebug驱动器的图片，暂时测试一下！如果这是永久解决方案，请创建一个帐户并尝试将其上传到 Cloudinary 之类的 Cloud Assert Provider，并将其作为 Link 添加到 src

Answer 2

If you guys dont believe me, heres the bug in action: codesandbox.io/s/hardcore-kare-212iuy?file=/src/App.js

当我以隐身模式 window 打开它时它工作正常，但如果我以常规方式打开它 window…

…您的实例中的文件名（尽管不在您问题中包含的代码中）以 ad0.jpg 结尾，这是触发常见 ad-blocking 算法的命名约定。

别这么叫。

故事的寓意：如果未加载图像，请查看浏览器的“网络”选项卡，了解浏览器尝试加载图像时发生的情况。

是什么阻止了此 JPG 图像在 HTML/CSS 中的工作？

What is Preventing This JPG Image From Working In HTML/CSS?

html

css

jpeg

image

reactjs