CODEWITHSUNDEEP
angularsvgproductionangular-aot
FussinHussin
FussinHussin

Reputation: 1814

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

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...
      ],

Upvotes: 6

Views: 4304

Answers (1)

niio
niio

Reputation: 346

I had shared svg icons stored in the apps/shared/assets/icons/*. For angular 14 this worked:

in angular.json:

"assets":[
...
    {
      "glob": "**/*",
      "input": "apps/shared/assets/",
      "output": "assets"
    }
]

the path to the icon in html:

src="assets/icons/connection.svg"

and added svg mime type on the server:

mimetype.assign = (
  ".html" => "text/html",
  ".txt" => "text/plain",
  ".jpg" => "image/jpeg",
  ".png" => "image/png",
  ".js" => "text/javascript",
  ".css" => "text/css",
  ".svg" => "image/svg+xml"
)

Upvotes: 0

Related Questions