Images not displaying but also not throwing 404

Question

I'm using javascript to access a json file and add a tile for each JSON object in this file. This is working fine, but I'm having an issue with the dynamic inserting of images to these tiles. What I have is a default image, and if the "imageName" property isn't found in the JSON object (undefined), then use the default one. My code seems fine, and it finds the image OK, but it doesn't display it, rather it shows the standard 404 image. The weird thing is, it also doesn't throw a 404, neither does it show as a 404 error in the network tab (I'm on Chromium). I've also purposefully renamed an image wrong and it throws a 404. This is hosted on GitLab CE (however, the issue occurs locally too), and my code is below:

Javascript:

$.getJSON('../assets/posts.json', function(data) {
    data.forEach(function(post) {
        for (var i = 1; i <= 11; i++) {
            if (post[i] !== undefined) {
                if (post[i].imageName === undefined) {
                    $('#repeatPosts').append('<li><img src="../assets/images/defaultBlogImage.jpg">' + post[i].title + '</li>');
                } else {
                    $('#repeatPosts').append('<li><img src="../assets/images/' + post[i].imageName + '" />' + post[i].title + '</li>');
                }
            }
        }
    });
});

JSON:

[{"1": {
    "title": "Test post",
    "date": "03-07-2016",
    "body": "Just a test body"
},
"2": {
    "title": "Test post",
    "date": "03-07-2016",
    "body": "Just a new test body",
    "imageName": "defaultBlogImage.jpg"
}}]

and the offending website is here

I have a 404 error in my console, but that's because of the typo when trying to find `defaultBlogeImage.jpg`. Remove the `e` from `Bloge` and it works. — Reinstate Monica Cellio, Aug 03 '16 at 13:30
That's the image i purposefully broke. There are two others that are right URLS — TechnicalTophat, Aug 03 '16 at 13:31
and use `typeof post[i] !== 'undefined'`. Post: http://stackoverflow.com/questions/4725603/variable-undefined-vs-typeof-variable-undefined — Phil, Aug 03 '16 at 13:32
Do you have the required permission set to the `"images"` folder? — David R, Aug 03 '16 at 13:35
can you provice the absolute path of the image? just for testing purpose.. — Jaimin, Aug 03 '16 at 13:37
@Jaimin [here is the absolute url](http://roconnor.gitlab.io/assets/images/defaultBlogImage.jpg) — TechnicalTophat, Aug 03 '16 at 13:38
@RhysO I think its gitlab and not your path. Maybe this will help you: http://stackoverflow.com/questions/16195378/gitlab-does-not-load-assets ... — Phil, Aug 03 '16 at 13:39
@Phil thanks but this is GitLab CE. It's online, not a personal server (EE) — TechnicalTophat, Aug 03 '16 at 13:40
@RhysO it is saying "The image “http://roconnor.gitlab.io/assets/images/defaultBlogImage.jpg” cannot be displayed because it contains errors." — Jaimin, Aug 03 '16 at 13:42
You can open the image link directly, but you can't embed it in a page. I just tried adding it on another site and it showed as a broken image. This must be something that the server is doing - maybe a broken redirect? — Reinstate Monica Cellio, Aug 03 '16 at 13:45
@Archer Maybe, but I'm looking at it fine (locally), so Jaimin's comment is unusual to say the least. — TechnicalTophat, Aug 03 '16 at 13:46
See what I mean here. Both the image and the link use the absolute URL so both should be exactly the same. This is definitely a server issue - https://jsfiddle.net/ArchersFiddle/6wxhLh06/ — Reinstate Monica Cellio, Aug 03 '16 at 13:48
I guess you need to edit your `config.serve_static_assets` statement' assignment from **false** to **true** as `config.serve_static_assets = true`in your `/home/git/gitlab/config/environments/production.rb` file. — David R, Aug 03 '16 at 13:49
@DavidR Sorry I've edited my question, but I'm on GitLab CE, I don't have any of those files — TechnicalTophat, Aug 03 '16 at 13:56
Hmm.. Looks strange!. The `.css` files which are under the same `assets` folder are getting rendered in browser when you enter this url, `http://roconnor.gitlab.io/assets/css/bootstrap-theme.css` why not images? — David R, Aug 03 '16 at 14:07
@DavidR I'm not entirely sure, do webpages need `meta` tags to allow image loading? — TechnicalTophat, Aug 03 '16 at 14:11
@RhysO Can't you reach out to the GitLab support guys to ensure that you have adequate permission set on the `images` folder ? — David R, Aug 03 '16 at 14:13
@DavidR It's happening locally too, I'm using Gulp as a task runner, but that shouldn't affect it at all — TechnicalTophat, Aug 03 '16 at 14:16
You *can* open the image in the browser. It's only when you include it in a page that it's not working. — Reinstate Monica Cellio, Aug 03 '16 at 14:18
I guess your image is corrupted. When I check it here => `http://roconnor.gitlab.io/assets/images/defaultBlogImage.jpg` I get an box, which I'm unable to save it to my local disk by **right clicking => save image as** (it is greyed out!!) — David R, Aug 03 '16 at 14:27
@DavidR I didn't see that, what's that about?? I've just tested it with 2 pngs (one converted from jpg and the other straight off the internet [here](http://www.ceridiansmallbusiness.ca/partner/images/sample-stamp.png)), and one jpg, but none of them work. This is all local, and IE is the same... Dafuq?!?!?! — TechnicalTophat, Aug 03 '16 at 14:45
@Archer still not working?? [New Image Here](http://roconnor.gitlab.io/assets/images/sample-stamp.png) — TechnicalTophat, Aug 03 '16 at 15:01
Your server is not serving images correctly, for some reason. I don't know gitlab but I'm guessing it's out of your control, which would make it a support issue for server admin. — Reinstate Monica Cellio, Aug 03 '16 at 15:20
@Archer This is happening locally too. When I use `gulp servewatch` and go to `localhost:4000` the images aren't showing, just like on live. The repo is at [roconnor.gitlab.io](http://gitlab.com/roconnor/roconnor.gitlab.io) if you can solve it — TechnicalTophat, Aug 03 '16 at 15:24
@Archer It was my task runner. When it injected the header files it decided to corrupt the images by injecting into them as well xD — TechnicalTophat, Aug 04 '16 at 11:38
Ah okay. Thanks for the reply. That would have irritated me otherwise :p — Reinstate Monica Cellio, Aug 04 '16 at 11:40

score 0 · Accepted Answer · answered Oct 25 '16 at 10:27

0

I finally solved this. It wasn't an issue with the image itself, but all my files were being mutated by my task runner, and it messed up the signature of the image, and as such was no longer a valid image. I solved this by just ignoring all image files.

answered Oct 25 '16 at 10:27

TechnicalTophat

2,118
1
12
33

Images not displaying but also not throwing 404

1 Answers1