CODEWITHSUNDEEP
typescriptvue.js
Demiro-FE-Architect
Demiro-FE-Architect

Reputation: 3740

VueJS (Typescript) - SVGs not rendering

So I have a weird problem that should've be straight forward. if using vue with js as cdn.... than this works perfectly (as it does in angular or anywhere else)

<img src="/assets/images/icons/myicoin.svg>

but oddly if I do it via webpack (and typescript), it does not work... when accessing the svg directly

http://localhost:8080/assets/images/icons/myicoin.svg

it tries to render the app instead of the icon

I tried using vue-svg-loader

but it feels waaaaay over engineered and it does not work as I want it...

so any idea how to tell webpack to leave SVGs alone abd treat it as any other image resource?

Odly enough if I enclude it as an external resource (different domain) it works completely fine

Upvotes: 1

Views: 933

Answers (1)

Demiro-FE-Architect
Demiro-FE-Architect

Reputation: 3740

OK, for those who don't know

DON'T PUT static assets like photos (including) SVGs into src/assets folder, put them into public/assets

all static assets should be put in the public folder, which on build, is just copied over!

Hope will help someone!

Upvotes: 3

Related Questions