How can I load images from the webserver?

Ionic Framework Ionic Angular
1

In Ionic v5.4.16 with Angular v9 I’d like to load images via ion-img. Usually one places image files into the source directory src/assets which ends up in the output directory e.g. www/assets after building. The angular.json looks as follows:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  ...,
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      ...,
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...,
            "outputPath": "www",
            ...,
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            ...

I pasted images into www/assets/label_images/apple.png, etc. and reference with <ion-img> src="/assets/label_images/apple.png"</ion-img> but it did not work. Have I used the
Is there a way to load images from the webserver instead?

2

That should be work. Do you have a demo app up on github that people could inspect?

3

It turned out that absolute references work just fine with my config: https://github.com/ionic-team/ionic-framework/issues/21883

4

For future reference, please do not open issues without confirming something is wrong in the framework :slightly_smiling_face:

1 Like
5

I’m sorry for the false positive.