Question 49462 in Photoshop Question posted in
The official user guide can be found here.

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

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 2000×2000 729KB .jpg mockup image edited in photoshop)

broken image

enter image description here

Is there something wrong with this image?

Tags:

2

Answers


  1. 0

    There is a high chance of the Image getting Corrupted, try doing a small edit in any editing software (photoshop, or even system default apps) and save it again and try using it!
    You can also simply take a screenshot of it and try using it in your code

    If that doesn’t work, you can use this link https://i.stack.imgur.com/LGYHM.jpg in your src as a string, this is the image uploaded to Stackoverflow’s drive and test it for time being! if that works as a permanent solution create an account and Try Uploading it to a Cloud Assert Provider like Cloudinary and add it as a Link in the src

    Login or Signup to reply.
  2. 0

    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…

    Blocked by uBlock Origin shown in Developer Tools

    … 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search