# Images uploaded via Media Manager not adding on Product Page

**URL:** <https://forum.wixstudio.com/t/images-uploaded-via-media-manager-not-adding-on-product-page/69799>\
**Category:** Ask the community\
**Tags:** code, wix-stores\
**Created:** [March 22, 2025, 8:57am UTC](https://forum.wixstudio.com/t/images-uploaded-via-media-manager-not-adding-on-product-page/69799 "2025-03-22T08:57:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![shelf\_space](https://avatars.discourse-cdn.com/v4/letter/s/df705f/32.png) [@shelf\_space](https://forum.wixstudio.com/u/shelf_space)\
**Post date:** [March 22, 2025, 8:57am UTC](https://forum.wixstudio.com/t/images-uploaded-via-media-manager-not-adding-on-product-page/69799/1 "2025-03-22T08:57:22Z")

</div>

Hi,  
We are using the Google Books API to fetch book information such as title, author, description, and price. All this data is successfully saved to Wix Stores using `wixStoresBackend.createProduct()`.

We are also downloading the book cover image from Google and uploading it to **Wix Media** using `mediaManager.upload()`. This works fine, and we receive a valid image URL and mediaId.

Then, we use both  
wixStoresBackend.addProductMedia()  
wixStoresBackend.updateProductFields()

to attach the image to the product.

There are **no errors** in the code, and the image appears in the **Wix Media Library** , but **it does not show up on the Product Page**.

✅ All other product fields (title, price, description) show correctly.  
❌ Only the image is missing on the live product page.

Example media ID format:

wix:image://v1/5dc8db\_abc123xyz456~mv2.jpg/book-cover-1742455602868.jpg#originWidth=500&originHeight=750

We also made sure to set:

metadataOptions: { isPrivate: false }

Everything seems to be working, **except the image is not displayed unless added manually** via the Wix dashboard. Any help or guidance would be greatly appreciated.

Thanks in advance!

**1️⃣ Adds the product (book) to the Wix Store without an image**

The function starts by creating a new product using the book’s title, description, price, ISBN, and initial stock quantity. This product is added as a physical item, and inventory tracking is enabled. At this point, the product is created without an image.

* * *

**2️⃣ Downloads the book cover image from the internet**

It fetches the cover image from the URL received via the book object. If the cover image is not available, it uses a placeholder image instead. The image is downloaded using `fetch()` and converted into a buffer to prepare it for upload.

* * *

**3️⃣ Uploads the image to Wix Media**

The downloaded image is uploaded to Wix Media using the `mediaManager.upload()` method. The `metadataOptions.isPrivate` flag is set to `false`, so the image will be publicly accessible. After the upload, a URL to the image is received.

* * *

**4️⃣ Converts the image URL into Wix Media ID format**

Since Wix requires a special `mediaId` format to use images in the product catalog, the standard URL is transformed into the appropriate format. This includes adding the file name and image dimensions.

* * *

**5️⃣ Adds the image to the product’s media gallery**

The formatted image ID is then added to the product’s `productMedia` field. This makes the image appear in the product’s media gallery on the Wix admin panel.

* * *

**6️⃣ Sets the image as the main product image**

In this step, the same image ID is used to update the product’s `mainMedia` field, which determines the primary image shown on the product page. The `productMedia` list is also updated again for consistency.

* * *

**7️⃣ Returns the success message**

If all operations complete successfully, a success response is returned. Otherwise, any errors are caught and logged, and a failure message is returned.

here is the code

import wixStoresBackend from ‘wix-stores-backend’;  
import { mediaManager } from ‘wix-media-backend’;

export async function addBookToStore(book) {  
try {  
// 1. Create product without image  
let newProduct = await wixStoresBackend.createProduct({  
name: book.Title,  
description: book.Description,  
price: Number(book.Price) || 0,  
sku: book.ISBN,  
stock: {  
quantity: 10,  
trackInventory: true  
},  
visible: true,  
productType: “physical”  
});

```
    console.log("✅ Product created (no image):", newProduct);

    // 2. Upload cover image to Wix Media
    let imageUrl = book.CoverImage || "https://via.placeholder.com/150";
    let response = await fetch(imageUrl);
    let buffer = await response.arrayBuffer();
    let fileName = `book-cover-${Date.now()}.jpg`;

    let uploadResult = await mediaManager.upload("", Buffer.from(buffer), fileName, {
        mediaOptions: { mimeType: "image/jpeg" },
        metadataOptions: { isPrivate: false } // Make image public
    });

    let fileNameFromUpload = uploadResult.fileName;
    let mediaId = `wix:image://v1/${fileNameFromUpload}/${fileName}#originWidth=500&originHeight=750`;

    console.log("✅ Converted Media ID:", mediaId);

    // 3. Add image to productMedia
    let mediaResponse = await wixStoresBackend.addProductMedia(newProduct._id, [
        { mediaId: mediaId, type: "image" }
    ]);

    if (!mediaResponse || !mediaResponse.length) {
        throw new Error("Failed to add product media. Response is empty.");
    }

    console.log("✅ Product media added:", mediaResponse);

    // 4. Update mainMedia
    await wixStoresBackend.updateProductFields(newProduct._id, {
        mainMedia: mediaId,
        productMedia: [{ mediaId: mediaId, type: "image" }]
    });

    console.log("✅ Product image updated.");

    return { success: true, message: "✅ Book added with image to product page!" };
} catch (error) {
    console.error("❌ Error:", error);
    return { success: false, message: "⚠️ Error: " + error.message };
}

```

}

---

<div class="post-metadata">

**Author:** ![Pratham](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/pratham/32/119586_2.png) [@Pratham](https://forum.wixstudio.com/u/Pratham)\
**Post date:** [March 22, 2025, 9:15am UTC](https://forum.wixstudio.com/t/images-uploaded-via-media-manager-not-adding-on-product-page/69799/2 "2025-03-22T09:15:48Z")

</div>

In place of:

> [@shelf\_space](#):
>
> ```javascript
> let mediaId = `wix:image://v1/${fileNameFromUpload}/${fileName}#originWidth=500&originHeight=750`;
> 
> ```

Try hardcoding a **https** URL and see if it works, for eg:

```javascript
let mediaId ="https://static.wixstatic.com/media/nsplsh_cb3efdf201a044fcb6f269d1d4c23b30~mv2.jpg

```

If it works, then try to convert wix:image to static.wixstatic URL.

More on that here:

> [@Create a URL for a media file: the truth about getFileURL](https://forum.wixstudio.com/t/create-a-url-for-a-media-file-the-truth-about-getfileurl/36548):
>
> So you want to create a URL to an image or video that you’ve uploaded to the Media Manager ? The simplest way is to use a static URL like this: let imageUrl =`https://static.wixstatic.com/media/${fileName}`; Keep reading for what fileName really means. There’s a bit of confusion about getFileUrl, so let’s clear some things up. getFileURL gives you a download URL with a token. The token will expire after 600 minutes so if you want to get to your file after 10 hours using the returned UR…