Images for custom webcomponent

[akshilverma]

Hi,

Is there a way for me to store an image file locally in a custom webcomponent?
I tried to create a new folder and store an svg file in it but neither that folder nor the svg file was part of the dist folder.

Best regards,
Akshil Verma

[ilhan007]

Hello @akshilverma can you show us how you refer to the svg file, it should be imported in order to be bundled.

[akshilverma]

I have placed the svg file inside an images folder (inside src folder, src/images/logo.svg). After this I am trying to directly consume it using the img tag in a .hbs file.
If I try to import the svg file in my main javascript file (for eg: import logo from './images/logo.svg'), I get an import error.

[ilhan007]

Yes, got it.
The reason for this that currently the dev setup does not copy svg files from src to dist, I think it only processes .css, .js, .ts files. As the component looks for it assets in the dist and the svg is not copied there - it fails.

We will follow up on this. Thank you for sharing this use-case.

Just for the test, if you manually copy the svg file to dist (dist/img/logo.svg), then should be able to display the svg with these 2 steps:

• In the component:

import svg from "./img/logo.svg";

get mySvg() {
		return svg;
}

• In the component template:

<div>
	<img src="{{mySvg}}">
</div>

[ilhan007]

Hello @akshilverma the best way is to include the svg directly in the template, f.e:

Component.hbs

<div> 
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
		<g role="presentation">
			<path d="M370 370q13 0 20.5 8t7.5 21q0 28-28 28h-29q-28 0-28-28 0-13 7.5-21t20.5-8h29zm-12-127q56 21 90.5 70.5T483 427v57q0 28-28 28H57q-28 0-28-28v-57q0-64 34.5-113.5T154 243q-40-40-40-100 0-30 11-55.5t30.5-45 45-30.5T256 1t56 11 45 30.5 30 45 11 55.5q0 60-40 100zM256 58q-36 0-60.5 24.5T171 143q0 37 24.5 61t60.5 24 60.5-24 24.5-61q0-36-24.5-60.5T256 58zM86 453h142V350l-20-19q-8-9-8-20.5t8-19.5l6-6q-27 3-50 15.5t-40.5 31-27.5 43T86 427v29-3zm340-23q0-28-10-52.5t-27-44-40-31.5-50-14l5 6q9 8 9 19.5t-9 19.5l-19 20v103h141v-26z">
			</path>
		</g>
    </svg>
</div>

This should work right?

The other approach with having the svg file, copied into the dist, then used via import also will work but not with all build tools.
So, with vit that you currently have because UI5 Web Components Tools is using it, it will work properly. But on the consumption side, when someone imports the component, and the component imports the svg, it might break depending on the build configuration.
Because, only js and json imports are standard so to say.
That's why embedding the svg source in the template is the most universal solution.

[akshilverma]

Yes, this works. Thanks Ilhan. I'll close this discussion.