thumbnailUrl or previewImg not showing in the Studio

[jose_aranda]

Description
I am registering a custom component in Plasmic using the thumbnailUrl property, but the thumbnail does not appear in the Studio. I also tried using the previewImg property, but it didn’t work either.

Code Structure
First, I initialize the loader:

export const PLASMIC = initPlasmicLoader({
  projects: [
    {
      id: process.env.PLASMIC_PROJECT_ID,
      token: process.env.PLASMIC_PROJECT_TOKEN,
    },
  ],
  preview: false,
});

Then, I register the component:

PLASMIC.registerComponent(PlasmicItemsCarousel, {
  thumbnailUrl: "https://static1.plasmic.app/steps_template_navigation.png",
  // We also tried with:
  // previewImg: "https://static1.plasmic.app/steps_template_navigation.png",

  name: "PlasmicItemsCarousel",
  props: {
    className: {
      type: "string",
      required: false,
    },
    model: modelSelectProps,
    visibleItems: {
      type: "number",
      required: false,
    },
    selectedElements: {
      type: "choice",
      multiSelect: true,
      options: (props: any, ctx: any) => {
        return ctx.selectOptions;
      },
    },
  },
} as any);

What we expected
We expected to see the thumbnail in Plasmic Studio so that the component could be visually identified with the provided image.

What happens
The component shows up correctly in the Studio, but the thumbnail does not appear. We tried:

• thumbnailUrl
• previewImg

(according to the Plasmic documentation)
Both attempts were unsuccessful.

The image is hosted at a valid public URL:
https://static1.plasmic.app/steps_template_navigation.png

We also confirmed that:

• The other component properties work as expected.

Studio Image (without thumbnail)

Question
Are we using the property incorrectly, or is there any limitation with thumbnailUrl that we should be aware of?

We greatly appreciate any help.

[jason]

Hi @jose_aranda, the thumbnail only shows up in the insert menu (the menu that pops up when you click the big blue plus button).

[jose_aranda]

Hi, yes I understand — however, even in that section (the insert menu that appears when clicking the blue plus button), the thumbnail is still not showing up.

Here’s how I’m registering the component:

PLASMIC.registerComponent(PlasmicAsymmetricCarousel, {
  name: "PlasmicAsymmetricCarousel",
  section: "Section Example",
  thumbnailUrl:
    "https://www.dropbox.com/scl/fi/34ttkd29eq9dsmv1ax4wf/PlasmicAsymmetricCarousel.webp?rlkey=9dczqz98auyxu5q9k974p14wf&st=fpkqlrgz&dl=0",
  props: {
    className: {
      type: "string",
      required: false,
    },
    model: modelSelectProps,
    selectedElements: {
      type: "choice",
      multiSelect: true,
      options: (props: any, ctx: any) => {
        return ctx.selectOptions;
      },
    },
  },
} as any);

The thumbnailUrl points to a .webp file hosted on Dropbox. I’ve confirmed that the URL works and that the image loads correctly in a browser, but the thumbnail still doesn’t appear in the insert menu.

Is there anything I might be missing regarding the URL format or how Plasmic handles external images for thumbnails?

Thanks in advance!

[sarah_ahmed]

Hello @jose_aranda,

The URL you are using as thumbnail is not a direct image URL but a Dropbox preview page. For instance, it won’t work when used as src attribute in <img src="<url>"> either. Please use a direct image instead.