RhysO RhysO - 1 month ago 6
Javascript Question

Images not displaying but also not throwing 404

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

Answer

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.