Eugene Eugene - 2 months ago 10
jQuery Question

Image cannot be found AJAX(ASP.NET MVC)

I have AJAX call

Here is code

<script>
$(document).ready(function () {
email_update();
});

function email_update() {
$.ajax({
url: '@Url.Action("EmailsList", "Questions")',
contentType: 'application/json; charset=utf-8',
type: 'GET',
dataType: 'json',
processData: false,
success: function (result) {
var email = result;
// console.log(result[0].Name);
for (var i = 0; i <= email.length - 1; i++) {
var emailHTML = '<div style="margin-left: 25px; margin-top: 10px;>' +
'<b style="margin-left: 10px;">' +(i + 1) +
'<b style="margin-left:20px;">' + result[i].Email + '</b>'+
'<b>' +
'<b style="margin-left: 20px;">' +
result[i].Name +
'</b>' + '<a style="float: right; margin-right: 20px;">' +
'<img src="~/Images/Edit.png">' +
'</a>' +
'<a style="float: right; margin-right: 20px;">' +
'<img src="~/Images/Delete.png">' +
'</a>' +
'</div>';
$(".email_list").append(emailHTML);
}
}
});
}




But I facing trouble


Failed to load resource: the server responded with a status of 404 (Not Found)


But image is in folder

I was having this code before (not in AJAX)
<a style="float: right; margin-right: 20px;" href='@Url.Action("Edit_mail", "Questions", new {id = item.Individ_Id})'>
<img src='@Url.Content("~/Images/Edit.png")'/>
</a>


where can be my mistake?

Answer

Its due to the reason that ~ has no significance in JavaScript/HTML. In Razor @Url.Content() converts virtual path to absolute path.

Use it as per you sample code or Store a reference in a variable and later use it

var editImage = '@Url.Content("~/Images/Edit.png")'

usage

'<img src="' + editImage + '">'