Angular как ссылаться на локальное изображение в JSON объект

Question

В указанном Angular проекте я создал / жестко закодировал объект JSON.

Как можно указать на изображение в вашем проекте.

Пример:

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

Я пытаюсь найти правильный синтаксис для ссылки на локальное изображение для отображения.

Это может быть возможным РЕШЕНИЕ

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

Не совсем уверен, если это лучшее решение, но оно мне помогло.

Вот источник .

Answer 1

Создайте локальную папку с именем assets или images и сохраните ваше изображение там. Добавьте ссылку на этот путь в вашем JSON, как показано ниже -

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

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

Answer 2

В вашем tsconfig.json вы можете создавать собственные псевдонимы для ваших путей.

{
    "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
    }
}

Другой вариант в вашем angular.json добавить следующую строку:

{
  "$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...

Затем используйте это так:

Answer 3

Попробуйте это:

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

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