Local URL not resolving correctly

UI Builder
1

I’m modifying the ‘Leaflet map’ custom component so that each marker can have a unique icon (‘map pin’.

The file structure (below) has the icons in the folder ‘map-pins’, and the icon is used in ‘get-pin2.js’ (in ‘helpers’).
File structure
File structure

get-pin2.js
get-pin2

Get-pin2 tries to get the icon from the file structure directly, but this causes a 400 (Bad Request) error.
Error
error

The error indicates the URL is resolved incorrectly:
https://safewash.backendless.app/api/files/ui-builder/containers/map_pins/pin2.png

If I get the link of the icon from the Backendless file system, the icon is retrieved correctly:
https://safewash.backendless.app/api/files/ui-builder/containers/default/components/custom/bl-leafletMap-component/src/map_pins/pin2.png.

Seems it’s not possible to read directly from the custom component file structure in this way, but I don’t understand why. Comments?

2

Hi @Jim_Austin

try to import the file first

import pin2Png from '../map_pins/pin2.png'

export const pin2 = new Icon({
  iconUrl: pin2Png
...
})
3

Thanks Vlad, that works!
Any idea why the import works when the direct assignment doesn’t? Or is this just one of those ‘that-the-way-it-is, live with it’ things?

4

I do not know how the Icon component works but I suspect it just passes the iconUrl property into some dom element and then a browser tries to download it in order to display it in the UI. But when the browser sees a relative URL it composes an absolute one based on the current HTML page path, that’s why you can see a URL which it not actually relative to the component.

But when you import it using JS code it goes into the component build and composes a correct URL.

So the right way is to use the import to have a correct URL.

5

Thanks Vlad, that makes sense …