Images failed to load

Asked Apr 13 '14 at 18:01

Active Apr 13 '14 at 18:20

Viewed 111 times

I am trying to dynamically changing image src using jquery with image path from the database.

This code here is inside a form tag

<img src="images/Desert.jpg" alt="..." style="height:100px;width:200px;" class="img-thumbnail">

var j = 0;
$.each(lectObject, function(){

if (j == 1) {
     $('form#unitOne img').attr({src: lectObject[2]});
}else if (j == 2) {
     $('form#unitTwo img').attr({src: lectObject[2]});
}else if (j == 3) {
     $('form#unitThree img').attr({src: lectObject[2]});
}else if (j == 4) {
    $('form#unitFour img').attr({src: lectObject[2]});
}else if (j == 5) {
    $('form#unitFive img').attr({src: lectObject[2]});
}else if (j == 6) {
    $('form#unitSix img').attr({src: lectObject[2]});
}

j++
});

My concern is that, the src is succesfully change, ecause when i inspect element i see the path i want, but unfortunately the image faile to load!

edited Apr 13 '14 at 18:11

asked Apr 13 '14 at 18:01

Yunus Einsteinium

1,102
4
21
55

what errors do you get in the console? – Jorge Y. C. Rodriguez Apr 13 '14 at 18:03
This error here: "NetworkError: 404 Not Found - http://localhost/raters.com/public/images%5CNGzUuF_8.jpg" – Yunus Einsteinium Apr 13 '14 at 18:06
1

so im guessing that `lectObject[2]` is == `CNGzUuF_8.jpg`? what is right url for that image? looks like is just a spacing, or back slashing that is messing it up – Jorge Y. C. Rodriguez Apr 13 '14 at 18:10
awesome, that is very true! Instead of http://localhost/raters.com/public/images%5CNGzUuF_8.jpg", must be http://localhost/raters.com/public/images/5CNGzUuF_8.jpg" – Yunus Einsteinium Apr 13 '14 at 18:17
okay so try `console.log(lectObject[2]);` what do you see? – Jorge Y. C. Rodriguez Apr 13 '14 at 18:24
also to make sure there is not white space in the data, use `$.trim(obj)` – Jorge Y. C. Rodriguez Apr 13 '14 at 18:29
when is console.log i get \images\myoNOr_1.jpg , but the error says http://localhost/raters.com/public/%5Cimages%5CILOSiJ_3.jpg" , i do not understand where these %5C comes from . . . – Yunus Einsteinium Apr 13 '14 at 18:38
Try running Your lectObject[2] though an encodeURIComponent() first. http://www.w3schools.com/jsref/jsref_encodeuricomponent.asp – Mark Jones Apr 13 '14 at 18:45
or you can look at this http://stackoverflow.com/questions/6417641/converting-backslashes-into-forward-slashes-using-javascript-does-not-work-prope to change the back slash to forward slash ;) – Jorge Y. C. Rodriguez Apr 13 '14 at 18:49
@jycr753 %5C is a backslash... – Mark Jones Apr 13 '14 at 18:50
yeah i know @MarkJones it didnt know could not do back slash symbol – Jorge Y. C. Rodriguez Apr 13 '14 at 18:51
Ah, ;) Forgot about formatting here. – Mark Jones Apr 13 '14 at 18:52
@jycr753, i just check, there is no ` in the database where i keep the path – Yunus Einsteinium Apr 13 '14 at 18:52
@MarkJones, i just change backslash to forwardslash, the error changed to "NetworkError: 404 Not Found - http://localhost/raters.com/public/images%2FTRL6or_7.jpg" so instead of %5C i am getting %2F – Yunus Einsteinium Apr 13 '14 at 19:05
can you post array from the database so I can debug it ;) – Jorge Y. C. Rodriguez Apr 13 '14 at 19:18
This is what i get from database images/brMljr_14.jpg, i console.log it and saw! But when i changed img attribute to it the / changes to %2C – Yunus Einsteinium Apr 13 '14 at 19:23
do you have magic quotes on? – Jorge Y. C. Rodriguez Apr 13 '14 at 19:26
where can i check that ? – Yunus Einsteinium Apr 13 '14 at 19:27
phpinfo.. that function if on it will escape all slashes – Jorge Y. C. Rodriguez Apr 13 '14 at 19:29
Is there anyway to escape the slashes using jquery – Yunus Einsteinium Apr 13 '14 at 19:48
I did put a link before you should check out. – Jorge Y. C. Rodriguez Apr 13 '14 at 19:56
@jycr753, thank you very much for your help, the images just loaded correctly! I removed the encodeURIComponent() added initially – Yunus Einsteinium Apr 13 '14 at 20:09

Images failed to load

0 Answers0