I found the likely problem in your CSV row: your image_url value is formatted as a Markdown hyperlink instead of a plain image URL.
Your Blogger code expects a URL like this:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPP3CgGTlThP0CO_gfyhjjtnYD3dvA-hhrtiot6wNRZhsZhzmN1uvSXqMXXefHF9A4At0yuricJc-yR6WlcaWyWE7JXekCjRXm4X4IZ2OIkHJXEVoEpqA89Pw7ZKClBDWrzEVHju50ZlCodYGjgII-GYBBm1RqbQdWSk9TiUocqjGEQkr1GALRpwpYXbg/s1234/primer.jpg
But your CSV contains the Markdown format [URL](URL). The browser cannot load that entire string as an image address.
1. Correct the image_url column
In your Google Sheets spreadsheet, replace the current image_url cell with the plain URL below.
2. Make the Blogger code more tolerant of Markdown URLs
If your spreadsheet contains other image URLs formatted as [URL](URL), replace the line that reads const imageUrl = safeUrl(product.image_url); with:
const rawImageUrl = String(product.image_url || "").trim();
const markdownMatch = rawImageUrl.match(/^\[.*?\]\((https?:\/\/[^)]+)\)$/);
const cleanImageUrl = markdownMatch ? markdownMatch[1] : rawImageUrl;
const imageUrl = safeUrl(cleanImageUrl);This lets your code extract the actual URL from a Markdown-formatted cell while preserving normal URLs.
3. Test the image
Open the plain image URL in a new browser tab. If the product photo appears, refresh your Blogger page after republishing the Google Sheets CSV.
If it still doesn't appear, check that the published CSV contains the corrected value and that the image host allows external embedding.
One more thing: your affiliate_url is also formatted as a Markdown hyperlink. If your code expects a plain URL, change that cell to:
https://invl.me/clo2ycx
That will help ensure the product button links correctly, too.
Let's troubleshoot this directly. Since you're using Blogger (Blogspot) with a Google Sheets CSV, there are three likely causes:
The published CSV still contains a Markdown link such as
[https://...](https://...)instead of a plain URL.The Blogger code is reading the wrong column or the CSV has a different header than expected.
The image URL is invalid or the image host is preventing the image from loading.
Your image_url should contain only the URL itself, with no square brackets, parentheses, or quotation marks added by Markdown.
I tested your exact image URL, and the image opens successfully. So the image file itself is accessible. The next step is to fix how your Blogger page reads and displays the CSV data.
Step 1: Test the published CSV
Open your published Google Sheets CSV URL in a new tab.
Find the row for o.TWO.o Primer. The image_url column should contain the plain URL, not Markdown formatting. If it still contains [https://...](https://...), correct the Google Sheets cell and publish the sheet again.
Step 2: Update the Blogger image code
In your Blogger HTML/JavaScript gadget, locate the part that displays product images. Replace that image-rendering section with this code:
const rawImageUrl = String(product.image_url || "").trim();
// Support both plain URLs and Markdown-formatted URLs.
const match = rawImageUrl.match(
/^\[([^\]]+)\]\((https?:\/\/[^)]+)\)$/
);
const imageUrl = safeUrl(
match ? match[2] : rawImageUrl
);
if (imageUrl) {
const img = document.createElement("img");
img.className = "lm-image";
img.src = imageUrl;
img.alt = product.title || "Product image";
img.loading = "eager";
img.onerror = function () {
console.error("Image failed:", imageUrl);
img.alt = "Product image could not be loaded";
img.style.display = "none";
const error = document.createElement("p");
error.textContent = "Image failed to load. Check the CSV URL.";
img.parentNode.appendChild(error);
};
imageWrap.appendChild(img);
} else {
imageWrap.textContent = "Missing or invalid image URL";
}Important: This snippet assumes your existing code already defines safeUrl, product, and imageWrap. Keep those existing definitions. Replace only the old image-rendering section.
Step 3: Check the result
Reload the published blog page. If the image remains missing, I need to see the actual data your Blogger code receives.
Please share your published Google Sheets CSV URL (not your private editing link). I can then help you check the CSV structure and identify the next fix.
0 Comments