Getting incorrect filepath inside customized block front-end output utilizing @wordpress/create-block tutorial

I’m following the official WordPress "Create a Block Tutorial" situated right here: https://developer.wordpress.org/block-editor/handbook/tutorials/create-block/

I used this as a place to begin for the plugin: npx @wordpress/create-block

I’m utilizing it along side Native by Flywheel for my dev setting. Principally all the things appears to be working besides when I attempt to embody different information within the block’s CSS like a customized font file or a picture. That is a part of the tutorial: https://developer.wordpress.org/block-editor/handbook/tutorials/create-block/block-code/

Instance:

@font-face {
    font-family: Gilbert;
    src: url(./Gilbert-color.otf);
    font-weight: daring;
}
.wp-block-create-block-tdblocks {
    font-family: Gilbert;
    font-size: 64px;
    font-weight: daring;
    background-image: url(./map_bg.png);
    background-repeat: repeat;
}

So after I insert the advisable code and run npm run construct, the css file generated by the construct course of leaves the hyperlinks to those information relative to the present internet web page’s URL and never a hyperlink to its file location within the correct plugin folder.

Here’s what it offers me for the picture file as an illustration (which reveals as a 404 error naturally):

https://taylor-design-starter-theme.native/sample-page/photos/map_bg.f0104819.png

I might count on it to provide me this:

https://taylor-design-starter-theme.native/wp-content/plugins/tdblocks/construct/photos/map_bg.f0104819.png

I’ve tried adjusting the "url" worth within the scss file to see if that may assist. Like src: url(../map_bg.png); or src: url(map_bg.png); and that did not appear to do something.

Am I lacking one thing? Or is there a method to get it to make use of the plugin listing?

Thanks.