Failed To Load Resource Error

Question

I am having trouble viewing 3 different background-image .jpg files through one thumbnailFilePath in javascript. The HTML and CSS coding does recognize all of the files correctly, but the background images will not load into a browser. Therefore, you can not view these images. On the other hand, the browser does recognize to see the javascript videocaption text and the play_icon.png image files correctly.

// JavaScript Document
$(document).ready(function(){

  $('a.videoLink').each(function(){ 

    var thumbnailFilePath = 'video/'+$(this).attr('videofile')+'.jpg';
    var videoCaption = $(this).attr('videocaption');

    $(this).css('background-image','url('+thumbnailFilePath+')'); 
    $(this).html('<div class="caption">'+videoCaption+'</div><img src="../images/play_icon.png" class="play"/>');

  });

});

Answer 1

Maybe your video directory is not located in the same directory like your javascript file with this code? Otherwise use a additional slash in front of "video", if it is in the root:

var thumbnailFilePath = '/video/'+$(this).attr('videofile')+'.jpg';

Answer 2

What's the value of the following attribute?

.attr('videofile')

Did you give attention to the file extension? (maybe result is: myvideofile.mpg.jpg)

Answer 3

The answer is that my .jpg files must have the identical file name as my HTML source code. The videofile="bruce_waltke" must have the same .jpg name. So my .jpg file was named bruce waltke.jpg with no underscore in-between. So the .jpg was initially saved as bruce waltke.jpg but it is now saved as bruce_waltke.jpg....So the image file was broken but its now fixed.