wordSmith
wordSmith

Reputation: 3183

link returning 404 for images, but the direct link to asset loads fine

In a webpage I am building, a few images are returning 404 errors, but the direct link to the images load them fine. The same file path. The permissions for the images are 755 so that shouldn't be a problem.

I'm linking to them in inline css, which I will fix, but like so:

<div class="swiper-slide" style="background-image: url(t.jpg;" data-year="2012">

and the image https://irfandesign.com/t.jpg loads fine. the live version of the site can be found at https://irfandesign.com/dev.html

Any ideas why the images are not loading? The one that is, is an absolute url unlink the relative urls these are.

Upvotes: 1

Views: 1715

Answers (3)

Alireza Hosseinitabar
Alireza Hosseinitabar

Reputation: 118

Remove ; at end of image name t.jpg; to t.jpg

Upvotes: 0

qelli
qelli

Reputation: 2077

You just got a very small (but really messy) syntax error. Your browser is trying to fix it by closing what you forgot to, but it ends up looking for the image named t.jpg;.

Remember url() is a CSS's function, so:

selector {
   background: url('..............');
/*  if you open --^                ^---- you must close        */
}

Your style attribute has the following value:

background-image: url(t.jpg;
/* it opens ---------^     ^---- but never closes... */

So, your smart (but not that much) browser tries to close it for you, causing it to end up as:

background-image: url(t.jpg;);
/*                          ^---- your browser trying to close it */

Here is how your property should look:

body { /* <-- Use your own selector */
  background-image: url('https://irfandesign.com/t.jpg');
  background-size: cover;
}

Ignore background-size property, it's just for visualization.

Upvotes: 1

edjm
edjm

Reputation: 5492

If you look closely at the URL for the images it is looking for https://.../t.jpg;

Upvotes: 0

Related Questions