Angular how to reference a local image into a JSON object

Question

In said Angular project, I have made/hardcoded a JSON object.

How would one point to an image that is within your project.

Example:

   picArray = [
      {
        imageIcon: 'PATH/assets/image1.png' //do not know how to do this one
      },
      {
        imageIcon: 'https://someurl.com/forsome/image.png' //this works fine
      }
   ]

I am trying to find the correct syntax to reference a local image to display.

This may be a possible SOLUTION

   picArray = [
      {
        imageIcon: require('./assets/image1.png') // so this displayed said image
      }  
]

Not entirely sure if this is the best solution, but it did help me out.

Here is the source.

add a check if string say `https` exist in the image path it will fetch from server else from local — Pardeep Jain, Feb 11 '20 at 09:57
Angular only points to src/assets folder, nothing else is public to access via url so you should use full path, so this should work: imageIcon: '/assets/image1.png' — BartoszTermena, Feb 11 '20 at 09:58

score 0 · Answer 1 · answered Feb 11 '20 at 10:00

0

Try this one:

picArray = [
  {
    imageIcon: 'assets/image1.png' //do not know how to do this one
  }, 
....

<img src="assets/image1.png" />
<img src="{{picArray[0].imageIcon}}" />

answered Feb 11 '20 at 10:00

qiAlex

4,290
2
19
35

score 0 · Answer 2 · answered Feb 11 '20 at 10:09

0

Create a local folder called assets or images and save your image there. Add a reference to that path in your JSON like below-

picArray = [
  {
    imageIcon: '../../assets/image1.png'
  },

<img src="{{picArray[0].imageIcon}}" />

answered Feb 11 '20 at 10:09

techie_questie

1,434
4
29
53

score 0 · Answer 3 · answered Feb 12 '20 at 00:24

In your tsconfig.json you can create custom aliases for your paths.

{
    "compileOnSave": false,
    "compilerOptions": {
      "baseUrl": "./src",
      "paths": {                    <=========== ADD PATHS
        "@assets/*": [
          "assets/images/*"
        ]
      },                            <=========== END OF PATHS
      "outDir": "./dist/out-tsc",
      "sourceMap": true,
      "declaration": false,
      "downlevelIteration": true,
      "experimentalDecorators": true,
      "module": "esnext",
      "moduleResolution": "node",
      "importHelpers": true,
      "target": "es2015",
      "allowSyntheticDefaultImports": true,
      "typeRoots": [
        "node_modules/@types"
      ],
      "lib": [
        "es2018",
        "dom"
      ]
    },
    "angularCompilerOptions": {
      "fullTemplateTypeCheck": true,
      "strictInjectionParameters": true
    }
}

Another option is in your angular.json add the following line:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "pgp-front": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/pgp-front",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/assets/images/favicon.ico",
              "src/assets",                      <================== ADD THIS LINE
              "src/manifest.webmanifest"
            ],
            "styles": [ File continues...

Then use it like this:

Angular how to reference a local image into a JSON object

This may be a possible SOLUTION

3 Answers3