How to get image url in DataTable js from data object?

Question

I have js DataTable to display list of items. Each item has few properties and few images. I create js DataTable to display all info. Everything is working except the image. Usually image is accessible by link:

@product.ProductImages.ImageUrl

My js DataTable code:

    function loadDataTable() {
        dataTable = $('#tblData').DataTable({
            "ajax": { url: '/admin/product/GetAll' },
            "columns": [
                { data: 'name', "width": "15%" },
                { data: 'category.name', "width": "10%" },
                {
                    data: 'imageUrl', "render": function (data, type, row) {
                        return '<img src="' data.product.ProductImages.FirstOrDefault().ImageUrl + '" "/>';
                    }, "width": "10%"
                },
                { data: 'description', "width": "30%" },
                { data: 'price', "width": "5%" },
    }
]

Image is not showing up in the data table. I tried using

<img src="' + data.ProductImages.FirstOrDefault().ImageUrl + '"

or just

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

But nothing works.. I do have code in item controller to display images, and at debugging step it does show up, that each item has N number of images.. I just want to show 1 image in the table..

What am I doing wrong ? Thank you.

================================ Update:

I followed Mr. Farid example, and got Image: null. I guess I am getting image source link incorrectly.

Here is my model :

public class Product
{
    public string Name { get; set; }
    public Category Category { get; set; }
    public string Description { get; set; }
    public decimal Price { get; set; }
    public List<ProductImage> ProductImages { get; set; }
}

and

public class ProductImage
{
    public int Id { get; set; }
    public string ImageUrl { get; set; }
}

So usually I retrieve images with linkL

product.ProductImages.ImageUrl;

Controller code:

public IActionResult Index()
{
    List<Product> productList = unitOfWork.Product.GetAll(includeProperties: "Category,ProductImages").ToList();

    return View(productList);
}

My JS code:

function loadDataTable() {
    $.ajax({
        type: "GET",
        url: '/admin/product/GetAll',
        success: function (response) {
            console.log(response);

            dataTable = $('#tblData').DataTable({
                data: response,
                columns: [
                    { data: 'name', "width": "15%" },
                    { data: 'category.name', "width": "10%" },
                    {
                        data: 'imageUrl',
                        "render": function (data, type, row) {
                            return '<img src="' + data + '" alt="' + row.name; '" style="height="100%  width="100%; "/>';
                        }, "width": "10%"
                    },
                    { data: 'description', "width": "30%" },
                    { data: 'price', "width": "5%" },
                         ]
            });
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
}

This is what I get from browser, I am using microsoft edge. productImages: null.

Web page look

Browser tools response

Few more details:

If I debug controller index method, it shows complete list of products, with pictures and links to them.

Product with list of images:

link to one of images of the product:

hopefully this helps..

I probably should access image link somehow differently, but I cant figure out how..

Thank you.

Answer 1

But nothing works.. I do have code in item controller to display images, and at debugging step it does show up, that each item has N number of images.. I just want to show 1 image in the table..

What am I doing wrong ?

Based on your scenario and description, it seems your data.product.ProductImages.FirstOrDefault().ImageUrl query might have the problem. Make sure its returning the single and correct image url which you are binding to your image src

As you haven't shared this details, so I couldn't test that. Apart from that, I have investigated with the demo image url and rest of the code and its working as expected.

Here is the steps how I investigated your scenario:

Demo Model:

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string ImageUrl { get; set; }
}

Demo Cotnroller:

[HttpGet]
public IEnumerable<Product> Get()

{

    return new List<Product>
        {
            new Product { Id = 1, Name = "Product 1", ImageUrl = "https://ip.keycdn.com/example.jpg?width=70&quality=10" },
            new Product { Id = 2, Name = "Product 2", ImageUrl = "https://ip.keycdn.com/example.jpg?width=70&quality=10" },

        };
}

View:

<table id="productTable" class="display">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Image</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
@section scripts {
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.6/css/jquery.dataTables.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {


            $.ajax({
                type: "GET",
                url: 'https://localhost:7163/products/Get',
                success: function (response) {
                    console.log(response);
                    $('#productTable').DataTable({
                        data: response,
                        columns: [
                            { data: 'id' },
                            { data: 'name' },
                            {
                                data: 'imageUrl',
                                render: function (data, type, row) {
                                    return '<img src="' + data + '" alt="' + row.name + '" height="50">';
                                }
                            }

                        ]
                    });

                },
                error: function (response) {
                    alert(response.responseText);
                }
            });

        });
    </script>
}

Output: