How Can I use template string to import image assets dynamic?

[Alkaidcc]

<template>
	<img :src="getImageUrl(props.icon)" alt="">
</template>

<script>
export default {
	props: ['icon']
	methods: {
		getImageUrl(icon){
			// How can I return the source URL to dev and pord? It's not working.
			return `@/assets/image/${props.icon}.png`
		}
	}
}
</script>

[chenjiahan]

You can place these assets in the public folder and reference them with URLs.

See: https://rsbuild.dev/guide/basic/static-assets#public-folder

[Alkaidcc]

will assets in public compress during bundle? Can I optimize asset size in the public folder?

[chenjiahan]

The assets in the public folder will not be bundled or compressed by Rsbuild.

You can compress the image assets in the public folder via https://tinypng.com/

[Alkaidcc]

I tried to do that with something like

const getImgUrl = (name) => {
  return new URL(`../../assets/${name}.png`, import.meta.url).href;
};

It has worked well in Vite. Does Rsbuild have any plan for a similar feature in the future?

[chenjiahan]

This usage is also allowed in Rsbuild, but Webpack/Rspack will replace import.meta.url with the absolute file: URL of the module. (see https://webpack.js.org/api/module-variables/#importmetaurl), so we can not use the final URL as an img href.

We will conduct research later and confirm whether Rsbuild should support this user