Images not loading - no errors in console

Help
1

so this is a weird one I have not found any answer to. its something ive been tackling to find for a few week now, so feel now I should now ask to see if anyone may know what could be wrong

I have a front page image auto scroll. its a div using with background-image

<div class="featured-slide" style="background-image:url('{{ site.url }}assets/images/{{ page.image }}');">
/// things like title etc. nothing too special
</div>

and the {{ page.image }} for the page itself would be image: image.png

simple stuff. but oddly. the images are not loading at all, but what’s weirder is that there are no errors in the console. only error messages cropped up if I do have something wrong typed. if I also try loading it directly in with no {{ page.image }}, it also doesnt pop up. again, very odd

ive also set up the front page with separate front feature pages, each having a link & the image to them. just to see if I could catch something. again, nothing popping up in console

---
layout: layout though not needed
title: Title
image: image.png
link: link/to/page
subtitle: about
date: 2021-05-30
---

its weird, because ive only started to run into this. I even changed it to an <img>, so to make sure it does load an image, which happily does, but annoyingly doesnt help why its still not loading the other way, the way id prefer

ive tried this in other things prior & don’t remember running into a problem, or maybe it didn’t crop up them at that point. but its very weird & can’t see as to why its being like this

ill keep trying. but its something im not figuring out & has delayed getting it finished, since everythings now done, except this weird problem

thanks
x

2

Try going to Network tab and filter by images and refresh.

Also take the Jekyll part of the equation out.

Look at what URL gets rendered in your HTML

And add that here.

I suspect you are missing a forward slash.

{{ site.url }}assets

abc.comassets

So do

{{ site.url }}/assets

And also paste the URL in the browser to see if the image loads directly.

And you can check your _site directory to see if the image is there.

Also I would say take out site.url as you don’t need it.

And if your site is on a subpath on GH Pages then you need to add the baseurl e.g. /my-repo

Like

{{ site.baseurl }}/assets/img/{{ page.image }}
1 Like
3

hello,

aye thats all fine. ive double checked. done extra changes making sure. but same thing. even with a page that has the direct link, also image slide that use the {{ page.image }}, but still no images. very weird

even checked the built _site & ran that, but also ht same thing. also no errors messages

this is quite weird indeed. im gonna try a few more things, see if a solution comes up. maybe even try another way if there is something

4

do you have a link to the live site?

5

hello,

its currently not live at this moment. though im heading to do a simple fix, then look at the problem again

6

If you inspect the element in dev tools, you can hover of the URL to see the image previewed.

It might be that your element is small so the image judge appears to not be there.

Also I’d say if you are puzzled, go to a working state. Like make an image tag instead so you can see the image loading. Then move to CSS.

Also using style inline is 90s CSS style. The modern way is to make a class or ID specific rule in your CSS file and load that on the page. I guess you can use Jekyll logic in the file if it is .scss file, but at the least you can make a style tag on the page directly or in a layout and use Jekyll logic in there.

7

You can also go back to basics with CSS.

On a new page in your site. From CSS background-image property

---
---
<style>
body {
 background-image: url("assets/images/hello.png");
 background-color: #cccccc;
}
</style>

## Image test page

Provided you point an appropriate filename.

Then if that works, then apply your Jekyll logic and move style to a layout so it works across pages.

8

what’s weird about this the most, is that this has been converted from a paid template I liked, so it was straight forward to convert it to Jekyll. just this problem popped up from nowhere

ill try those things again, cheers

1 Like