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?

  • Do you see anything in the console log for Chrome? A mime error perhaps? – Michael A Mar 25 '15 at 1:41
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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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