svg's won't load in production mode

All my svg's work perfectly in dev mode, as soon as I run `ng build --prod --aot" they are not loading. They all fallback to the png image. I can't figure out how to fix it. I have been on github already, and tried

absolute paths
relative paths
binding vs. interpolation

I'm using angular 4.4.3

and angular/cli 1.5.4

html:

<img
    class="chain"
    src="../assets/svgs/LinkWardenChain.svg"
    alt="Linkwarden chain graphic"
    onerror="this.src='../assets/images/LinkWardenChain.png'"
>

another example:

<img
    class="chain"
    [src]="ethernet1"
    alt="ethernet connected graphic"
>

*I cannot upgrade to angular 5 at the moment, due to 3rd party package support

SOLUTION

Thanks to Mathew for the answer, adding the file paths to the cli assets folder:

"assets": [
        "assets",
        "favicon.ico",
        "./src/assets/svgs/eth-100.svg",
        "./src/assets/svgs/eth-1000.svg",
        ...etc...
      ],

svg's won't load in production mode

0 Answers