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).