The Images Are Not Loading

Express not loading Images

Given the location of your files, you have to give express.static(), the actual location in your file system relative to your project. For a link like this to be served by express.static():

Option 1

You would need to change this:

app.use(express.static("/public"));

to this:

app.use("/public", express.static(path.join(__dirname, "public")));

---

Option 2

Or, you can remove the /public from the link and use this type of link:

with this:

app.use(express.static(path.join(__dirname, "public")));

---

And, with option 1, change this:

background-image: url("../Images/backgroundImages.png");

to this:

background-image: url("/public/Images/backgroundImages.png");

or with option 2, change to

background-image: url("/Images/backgroundImages.png");

---

You do not want to be using path relative URLs when specifying any resources because that then depends upon the URL of the page which is not something you usually want. Instead, static resources should be referenced with a leading /.

Images are not loading for the static images folder in flask app after __init__.py setup

Assuming that 'website' is the main dir in which your Flask application is set, and that you have a structure like this:

/website
  /static
     /images

then you should do this:

<img style="height: 250px;" src={{ url_for('static', filename='images/'+photo.filename ) }}/>

Images not showing up, despite having the correct path

For people having the same problem in the future, the problem was with express and how static files in express work.

I had the following in my app.js

app.use( express.static( "public" ) );

which meant the root folder for my static assets was actually another directory.

You can read up on it here

Image is not showing in browser?

I find out the way how to set the image path just remove the "/" before the destination folder as "images/66.jpg" not "/images/66.jpg" And its working fine for me.

Images not loading from different website in Safari HTML/JavaScript

So removing some stuff worked for me. Basically Safari doesn't support navigator.userAgentData so it wasn't displaying images for that reason. So i had to remove it:

for (let i = 0; i < 11; i++) {
  Draw_Images(i);
}

function Draw_Images(i) {
  const isMobile = navigator.userAgentData.mobile;   //REMOVED THIS AND IT WORKED!!
  var div = document.createElement('div');
  div.id = "meme" + i;
  div.style.borderRadius = "1%";
  div.style.width = "200px";
  div.style.height = "200px";
  div.style.border = "1px solid";
  div.style.padding = "0";
  div.style.margin = "0";
  var divParent = document.getElementById("memes_container").appendChild(div);
  var img = new Image();
  img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
  img.id = "image_meme" + i;
  img.style.width = "100%";
  img.style.height = "100%";
  img.style.objectFit = "contain";
  img.className = "img-fluid";
  img.alt = i;
  img.crossOrigin = 'anonymous';
  divParent.appendChild(img);
}

---

Related Topics