the product image does not display

 The most likely reason is that the sample CSV uses placeholder image URLs such as https://example.com/images/wireless-earbuds.jpg. Those are examples, not real product images, so they won't display.

Let's fix this in Lazada Market. There are three things to check:

1. The image_url column: it must contain a real, publicly accessible image URL.

2. The image hosting: some product image URLs may block loading from Blogger or expire.

3. The CSV data: make sure the image_url column name matches the code exactly.

Step 1 — Check your image URLs

Open your Google Sheet and inspect the image_url column. A valid image URL should usually begin with https:// and open an image directly in a browser.

For example, this is only a placeholder and will not work as a real product image:

https://example.com/images/wireless-earbuds.jpg

Use the actual image URL from an authorized source instead. The ordinary Lazada product page URL is not necessarily an image URL.

Step 2 — Replace the image code with a more diagnostic version

In your Blogger HTML code, find this line:

const imageUrl = safeUrl(product.image_url);

Then locate the section that creates const image = document.createElement("img"); inside renderCard(). Replace the image section with this code:

const imageUrl = safeUrl(product.image_url);

if (imageUrl) {
  const image = document.createElement("img");
  image.className = "lm-image";
  image.src = imageUrl;
  image.alt = text(product.title) || "Product image";
  image.loading = "lazy";

  image.onload = function () {
    console.log("Product image loaded:", image.alt);
  };

  image.onerror = function () {
    console.warn(
      "Product image failed to load:",
      image.alt,
      image.src
    );

    const fallback = document.createElement("div");
    fallback.className = "lm-no-image";
    fallback.textContent = "Image unavailable — check image_url";
    image.replaceWith(fallback);
  };

  imageWrap.appendChild(image);
} else {
  const fallback = document.createElement("div");
  fallback.className = "lm-no-image";
  fallback.textContent = "Missing or invalid image_url";
  imageWrap.appendChild(fallback);
}

This will help you distinguish a missing URL from an image that the browser cannot load.

Step 3 — Test one product before changing the whole catalog

Image URL tester

Paste the actual URL from your CSV's image_url column to test whether it can load in this preview.

pierrerobert

If the URL opens an image in a new tab but still fails on Blogger, the host may restrict external embedding. This preview does not fetch your pasted URL directly.

Step 4 — If it still doesn't work

Open your published Blogger page in Chrome, right-click the missing image area, and select Inspect. Check the Console and Network tabs for image errors.

• 404 — the image URL may be incorrect or the file was removed.

• 403 — the image host may be blocking access.

• ERR_BLOCKED_BY_RESPONSE — the host may be restricting embedding.

• Mixed Content — an HTTP image may be blocked on an HTTPS page.

• No image request — check whether the CSV field is empty or the JavaScript is reading the correct column.

My recommendation: first check whether the sample CSV's placeholder URLs were replaced. That is the simplest likely explanation.

If you paste one row from your Google Sheet containing title and image_url (you can omit your affiliate link), I can help identify the specific problem.