Asset Binding in Component Schema Not Displaying Correctly

[Jar_Chen]

I’m currently working on an AR project and trying to display image assets through component schema bindings. I referenced the official Scavenger Hunt example and followed a similar structure — defining the assets in my component schema and assigning the correct assets in the UI editor (as shown in the screenshot below).

Despite setting up the component and assigning the image files (e.g., Bat01.png, Dog02.png, etc.) in the Inspector panel under scan_ui_component, the assets are not loading or displaying as expected during runtime.

I’ve confirmed that:

• The schema includes entries like Bat01, Dog02, etc., which match the asset filenames
• The component is properly added to the entity
• The assets are correctly uploaded under the assets/card folder
• There are no console errors thrown during runtime

[GeorgeButler]

Can you show the code that uses the asset paths?

[Jar_Chen]

• The component[cardName] returns the asset path I use for the AR entity, which works fine in the AR scene.

• However, when I use the same path for an HTML , the image fails to load (onerror is triggered).

• The asset is definitely present in my project and can be selected in the Studio asset dropdown.

• I want to know if there’s a recommended way to get a usable URL for HTML from a Studio asset, or if there’s something wrong with my approach.

const loadCardImage = (cardName: string, targetImage: HTMLImageElement) => {
  const assetPath = component[cardName]
  if (!assetPath) {
    console.error(`Cannot find asset path for card ${cardName}`)
    console.log('Available cards:', Object.keys(component))
    return
  }

  console.log(`Trying to load card ${cardName}:`, assetPath)

  ecs.assets.load({ url: assetPath })
    .then((asset) => {
      targetImage.src = asset.remoteUrl
      console.log(`✅ ${cardName} loaded successfully, URL:`, asset.remoteUrl)
    })
    .catch((error) => {
      console.error(`❌ Failed to load ${cardName}:`, assetPath)
      console.error('Error details:', error)
    })
}

[GeorgeButler]

Do you have to use HTML in your Studio project? Your best bet is broadcasting out a window level event so the HTML can update it with the correct image.