Imagens locais

Os componentes do Beagle normalmente se referem a imagens por id, veja o exemplo abaixo:

{
  "_beagleComponent_": "beagle:image",
  "path": {
    "_beagleImagePath_": "local",
    "mobileId": "zup-logo"
  }
}

Acima, a imagem à qual o componente se refere é zup-logo. Para isso funcionar, esse id precisa ser registrado no Beagle. Para registrar imagens no Beagle, é necessário passar um mapa na configuração (beagle-service.ts). Veja o exemplo abaixo:

import zupLogo from '../assets/zup-logo.png'
// ...

export default createBeagleUIService({
  // ...
  localAssetsPath: {
    'zup-logo': zupLogo,
  },
})

A imagem precisa existir na pasta de assets, nesse caso, localizada em src/assets. Se o Typescript reclamar, você pode criar o arquivo src/globals.d.ts com o seguinte conteúdo:

declare module '*.png'

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.