Unable to Load Image assets

[NishithHM]

I have several .svg assets in my assets folder. When I see the dist folder I see images used in the application appearing there, when I use the particular component in the project the assets are not loading I see broken image

but when I see index.modern.js

var leftArrow = "arrowLeft~iCDoygWo.svg";

this is wrong way of importing images when I convert this to import or requires it works fine

var leftArrow = require("./arrowLeft~iCDoygWo.svg";)

[jbournonville]

@NishithHM I have the same problem. But it seems that a walkaround was found in issue #285 May be you can try : var leftArrow = require("/./arrowLeft~iCDoygWo.svg";)

[saraahso]

I was able to fix this issue importing the SVG as ReactComponent

import { ReactComponent as YourFileName } from './your-file.svg'

and then, use it like:

<YourFileName />

[madzadev]

@jbournonville yup, same here! thanks 😉

[NishithHM]

I just wrote a custom function on my utils file, just pass the asset it work, just a hack

.//usage <img aria-hidden src={loadAsset(calenderIcon)} alt="calender" className={styles.calendarClass} onClick={disabled ? null : toggleCalendar} />

// implementation export const loadAsset = (asset) => { try { if (asset.includes('static')) return asset; return require(./${asset}); } catch (error) { return asset; } };

[sudobhat]

I have the same problem. Any proper solution yet?

[nishithMobinius]

@sudobhat see above comment, use loadAsset custom function

[ZellerDorjee]

@NishithHM hello, when i use loadAsset custom function, i got a error after bundle ../dist/index.d.ts Module not found: Can't resolve './components/BatchOperationBar' in '/Users/firewing/study_project/sm-antd/dist' when i remover loadAsset, it can works excuse me , What do you think might be the reason