Load images in scripts with Bud

bud
,
1

Hi.

I’m currently updating a project to the latest release of Sage 10 with Bud 5.7.6 but am a stuck on loading an image for a mapbox marker:

import Marker from '@images/marker.png';

map.loadImage(Marker, (error, icon) => {
...
});

This works perfectly fine running the dev server but when building for production the marker fails because the path doesn’t include the public path. Logging Marker shows:

images/marker.9ba4e3.png

which should be something like:

https://***.test/app/themes/***/public/images/marker.9ba4e3.png

My config is pretty straight forward:

module.exports = async (app) => {
	app
		.entry({
			app: ['@scripts/app', '@styles/app'],
			editor: ['@scripts/editor', '@styles/editor'],
			backend: ['@styles/backend'],
			login: ['@styles/login']
		})
		.assets(['images', 'fonts'])
		.watch('resources/views/**/*', 'app/**/*')
		.proxy('https://***.test')
		.serve('http://localhost:3000');
};

Is this a bug or is there anything wrong with my config?

2

I managed to get this working by tweaking the bud config but it seems a bit hacky:

module.exports = async (app) => {
	app
		.entry({
			app: ['@scripts/app', '@styles/app'],
			editor: ['@scripts/editor', '@styles/editor'],
			backend: ['@styles/backend'],
			login: ['@styles/login']
		})
		.assets(['images', 'fonts'])
		.alias('images', app.path('@src/images'))
		.when(app.isProduction, bud => bud.setPublicPath('/app/themes/***/public/'))
		.watch('resources/views/**/*', 'app/**/*')
		.proxy('https://***.test')
		.serve('http://localhost:3000');
};
3

I’ll test this out because ideally you wouldn’t need to do anything. What you’ve written is a great workaround.

Alternatively, you can explicitly declare your public path in a way that doesn’t interfere with acorn’s manifest module using extended EntryDescription syntax.

app.entry({
  app: {
    import: ['@scripts/app', '@styles/app'],
    publicPath: '/app/themes/sage/public/',
  })
})