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

Issue

I have this JPG image that I am trying to use in CSS as a background-image for a div container. All different images I have tried work, but this one just wont render in the viewport. If I go to inspect element, it shows the thumbnail when I hover over the elements URL.

I have tried everything including:

• Putting it in an img tag and giving it a static height/width
• Converting it to png and svg'
• Compressing it
• Scraping the metadata
• Using it in a different HTML/CSS file

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

Here's the culprit: (its just a 2000x2000 729KB .jpg mockup image edited in photoshop)

Is there something wrong with this image?

Solution

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

It works fine when I open that in an incognito window, but if I open it in a regular window…

… the file name in your live example (although not in the code you included in the question) ends in ad0.jpg which is a naming convention that triggers common ad-blocking algorithms.

Don't call it that.

Moral of the story: If an image isn't loading then look at the Network tab of your browser to find out what happens when the browser tries to load it.

Answered By - Quentin

Answer Checked By - Gilberto Lyons (PHPFixing Admin)