无法通过JQuery更改图片的src

Question

I am developing ASP.NET MVC 4 application. I am trying to change src attribute after controller sent data to a view, however all my attempts have no result. A script at a View:

<script type="text/javascript">
$(document).ready(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url: '/Home/UploadFiles',
        autoUpload: true,
        done: function (e, data) {
            $('.file_name').html(data.result.name);
            $('.file_type').html(data.result.type);
            $('.file_size').html(data.result.size);             
            $('.file_source').attr('src', 'D:/somePhoto.jpg'); //this row does not set 'src' of <img/>
        }
    }).on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.progress .progress-bar').css('width', progress + '%');
    });
});
</script>

<img class="file_source" src="" /> <!--src attribute is just empty---> 

Could you tell please where I've made an error? this row is not working:

$('.file_source').attr('src', 'D:/somePhoto.jpg'); //this row does not set 'src' of <img/>

The attribute 'src' of tag is not altered to src="D:/somePhoto.jpg". Any help would be greatly appreciated.

Answer 1

Have you tried assigning a valid image location from the web inside the image source? I am pretty sure, D:\\somePhoto.jpg is the location at server side. If that is the case, then javscript does not know how to get it, because js runs on client side, and after you have already sent the data from controller, there is nothing it could do.

First test with an image available from web to test, such as this - http://sci8.com/wp-content/uploads/2014/10/test-all-the-things.jpg

So change your code to -

$('.file_source').attr('src', 'http://sci8.com/wp-content/uploads/2014/10/test-all-the-things.jpg');

If that works ( and I am pretty sure, it will), then you know the reason why. Just keep the somePhoto.jpg somewhere inside the Content folder of your project and use that url.

for example

$('.file_source').attr('src', 'http://<hostaddress>/content/image/somePhoto.jpg');

If you are still facing problems, please let me know.