0

Here's the var from the function:

var aoTiles = "<div class='col-md-4 tile'><div class='tileImg' style='background: url(" + [value=this.Image_x0020_Thumbnail_.Url] + ") no-repeat 0 0;'><span class='openRotator'></span></div><div class='tileTitle'>" + this.Title + "</div><div class='tilePrice'>" + this.Product_x0020_Price.toFixed(2) + "</div></div>";

Instead of rendering the image, I get nothing.

If I do something simple like this:

var aoTiles = "<div class='col-md-4 tile'><div class='tileImg'>" + this.Image_x0020_Thumbnail_.Url + "</div><div class='tileTitle'>" + this.Title + "</div><div class='tilePrice'>" + this.Product_x0020_Price.toFixed(2) + "</div></div>";

If you need the full function:

function addOnsTiles(){
    $.ajax({
        async: false,
        url: "/_api/lists/getByTitle('Products')/items",
        type: "GET",
        headers: { "Content-Type": "application/json;odata=verbose", "Accept": "application/json;odata=verbose" },
        success: function (data) {  
            $.each(data.d.results, function () {
                var aoTiles = "<div class='col-md-4 tile'><div class='tileImg'>" + this.Image_x0020_Thumbnail_.Url + "</div><div class='tileTitle'>" + this.Title + "</div><div class='tilePrice'>" + this.Product_x0020_Price.toFixed(2) + "</div></div>";
                $('.aoTilesTopWrapper').append(aoTiles);
            });
        },
        error: function (data) {
            alert(data.statusText);
        }
    });

return true;
}

It gives me the image URL but still no image.

Why is it not rendering?

1
  • Do you see anything in the console log for Chrome? A mime error perhaps?
    – Michael A
    Commented Mar 25, 2015 at 1:41

1 Answer 1

0

If it is giving you the image URL, but not displaying the image, it is because you will need to add your image tag. Otherwise, the output will simply be your text, within the respective div.

var aoTiles = "<div class='col-md-4 tile'><div class='tileImg'><img src='" + this.Image_x0020_Thumbnail_.Url + "'></div><div class='tileTitle'>" + this.Title + "</div><div class='tilePrice'>" + this.Product_x0020_Price.toFixed(2) + "</div></div>";

as a background, you should be able to use the following:

var aoTiles = "<div class='col-md-4 tile'><div class='tileImg' style='background: url('" + this.Image_x0020_Thumbnail_.Url + "')'></div><div class='tileTitle'>" + this.Title + "</div><div class='tilePrice'>" + this.Product_x0020_Price.toFixed(2) + "</div></div>";

Please verify the syntax, but you should be able to console.log(aoTiles) and see what is within each loop, but use the console to see any script errors. You may also have a scenario, where you will need to define a width for tileImage in your CSS.

2
  • I was trying to bring in the image as an inline background style. Is that not possible?
    – FrankDraws
    Commented Mar 25, 2015 at 1:52
  • I added the requested code, to display as a background. Commented Apr 5, 2015 at 3:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.