jQuery Github Site

Question

Have images served up based on user choice via the dropdown box. Works locally, however, after committing to Github website the images are no longer being served. Developer tool does not show an error. Hovering over the image link simply states 'Could not load the image'. Source link is accurate and other static image loads properly. Any ideas as to why this is happening and/or possibly how to fix it?

var pictureList = [
    "../img/alabama.png",
    "../img/alaska.png",
    "../img/arizona.png",
    "../img/arkansas.png",
    "../img/california.png",
    "../img/colorado.png",
    "../img/Connecticut.png",
    "../img/Delaware.png",
    "../img/Florida.png",
    "../img/Georgia.png",
    "../img/Hawaii.png",
    "../img/Idaho.png",
    "../img/Illinois.png",
    "../img/Indiana.png",
    "../img/Iowa.png",
    "../img/Kansas.png",
    "../img/Kentucky.png",
    "../img/Louisiana.png",
    "../img/Massachusetts.png",
    "../img/Maryland.png",
    "../img/Maine.png",
    "../img/Michigan.png",
    "../img/Minnesota.png",
    "../img/Missouri.png",
    "../img/Mississippi.png",
    "../img/Montana.png",
    "../img/North Carolina.png",
    "../img/North Dakota.png",
    "../img/Nebraska.png",
    "../img/New Hampshire.png",
    "../img/New Jersey.png",
    "../img/New Mexico.png",
    "../img/Nevada.png",
    "../img/New York.png",
    "../img/Ohio.png",
    "../img/Oklahoma.png",
    "../img/Oregon.png",
    "../img/Pennsylvania.png",
    "../img/Rhode Island.png",
    "../img/South Carolina.png",
    "../img/South Dakota.png",
    "../img/Tennessee.png",
    "../img/Texas.png",
    "../img/Utah.png",
    "../img/Virginia.png",
    "../img/Vermont.png",
    "../img/Washington.png",
    "../img/Wisconsin.png",
    "../img/West Virginia.png",
    "../img/Wyoming.png", ];

var $sc = $('#state_area')

$('#picDD').change(function () {
    var val = $(this).val();
    $sc.children('img').attr("src", pictureList[val-1]);
})

Looks like the image requests are throwing 404 errors. Are you sure the relative paths are resolving correctly to the actual image URLs? Check your browser's dev tool's network tab. What do you see? — Terry, Apr 26 '18 at 06:50
You are right, 404 errors are being thrown, however, the static image on the page "../img/uspopcan.PNG" loads without a problem...Could the capitalized letters make the difference? — E.E., Apr 26 '18 at 07:05

score 1 · Accepted Answer · answered Apr 26 '18 at 07:06

1

After some testing on your Github page ;), I came to the conclusion the path is case sensitive.

This doesn't work: https://eclecticexistential.github.io/img/Hawaii.png

This does work: https://eclecticexistential.github.io/img/Hawaii.PNG

This answer also verifies that identifiers should be handled with capitalization in mind.

answered Apr 26 '18 at 07:06

Ron Nabuurs

1,528
11
29

Thank you very much ^_^! – E.E. Apr 26 '18 at 07:13

jQuery Github Site

1 Answers1