image is not showing in MVC

Question

User-1722422105 posted

Hi  vahid

i am geting image path from Json and image is not showing

what attrubute is missed.

  function loadData() {

            $.ajax({

                url: "/Home/List",

                type: "GET",

                contentType: "application/json;charset=utf-8",

                dataType: "json",

                success: function (result) {

                    var html = '';

                    $.each(result, function (key, item) {

                        html += '<tr>';

                        html += '<td>' + item.empid + '</td>';

                        html += '<td>' + item.Name + '</td>';

                        html += '<td>' + item.Age + '</td>';

                        // image

                        html += '<td>' + item.dateofbirth.parseNETDate(); + '</td>';

                        html += '<td>' + item.address + '</td>';

                        html += '<td>' + '<img src=' + item.imag_path1 + ' /> '+'</td > ';

                      //  html += '<td>' + item.Age + '</td>';

                       

                        

                        html += '<td><a href="#" onclick="return getbyID(' + item.empid + ')">Edit</a> | <a href="#" onclick="Delele(' + item.empid + ')">Delete</a></td>';

                       // html += '<td> <button type="button" class="btn btn-primary" id="btnaddfiles"  data-toggle="modal" data-target="#myfiles" >Upload Files</button></td>';

                        html += '<td> <button type="button" class="btn btn-primary" id="btnaddfiles"  onclick="return myFunc(' + item.empid + ')">Upload Files</button></td>';

                        html += '</tr>';

                    });

                    $('.tbody').html(html);

                },

                error: function (errormessage) {

                    alert(errormessage.responseText);

                }

            });

        }

Answer 1

User753101303 posted

Hi,

Before help buttons you have you have an "Insert/Edit code sample" button to better show your code. More likely you have a 404 not found (use F12 Network) because the image path is not correct. Rather than looking at your code you should first have a look at what happens exactly.

Answer 2

User-1722422105 posted

HI

code is below

$(document).ready(function () {
loadData();
});

//Load Data function
// <img src="~/img/5.cg.jpg" />
function loadData() {
$.ajax({
url: "/Home/List",
type: "GET",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
var html = '';
$.each(result, function (key, item) {
html += '<tr>';
html += '<td>' + item.empid + '</td>';
html += '<td>' + item.Name + '</td>';
html += '<td>' + item.Age + '</td>';
// image
html += '<td>' + item.dateofbirth.parseNETDate(); + '</td>';
html += '<td>' + item.address + '</td>';
html += '<td>' + '<img src=' + item.imag_path1 + ' +id=' + 'idss+'+'</td > ';
// html += '<td>' + item.Age + '</td>';


html += '<td><a href="#" onclick="return getbyID(' + item.empid + ')">Edit</a> | <a href="#" onclick="Delele(' + item.empid + ')">Delete</a></td>';
// html += '<td> <button type="button" class="btn btn-primary" id="btnaddfiles" data-toggle="modal" data-target="#myfiles" >Upload Files</button></td>';
html += '<td> <button type="button" class="btn btn-primary" id="btnaddfiles" onclick="return myFunc(' + item.empid + ')">Upload Files</button></td>';
html += '</tr>';
});
$('.tbody').html(html);
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}

////

if u have any info

if i inspect element i found path.it is showing on browser, but not in html code.

Answer 3

User1520731567 posted

Hi sidu,

It seems that there are something wrong with this line of code:

html += '<td>' + '<img src=' + item.imag_path1 + ' +id=' + 'idss+'+'</td > ';

According to your requirement,I make a demo, you could refer to it:

Controller:

     
        public JsonResult getAjax(string UserName)
        {
            ...//do sth according to your requirement
  
            return Json(new {imagelist = "/images/Arrow.png" },JsonRequestBehavior.AllowGet);
        }

View:

<input type="button" class="doClick" value="click"/>
<div class="xx">

</div>

    $(".doClick").click(function () {
           $.ajax({
                    url: '@Url.Action("getLeads", "Home")', 
                    dataType: "json",                
                    success: function (result) {
                        html = "<img src='" + result.imagelist + '\'' + "/>";
                        $('.xx').html(html);                      
                    }                   
                });
            });

How it works:

You could modify your line according to my demo.

And I suggest you could open F12 developer tool to check your code.

Best Regards.

Yuki Tao