angular 10: URL-адрес изображения, полученный из ресурсов после `Ng build`, указан непосредственно в папке` dist` и `dist-› assets`

Я нашел один сценарий, в котором изображения отображаются непосредственно в папке dist после ng build.

Я создал образец углового приложения. Ниже приведены подробности. Даже изображение находится внутри папки с ресурсами. Он копируется прямо в dist. Таким образом, он дублируется, что также приводит к увеличению размера сборки.

Как этого избежать? Мне нужно изображение только в папке с ресурсами. Снаружи должно быть чисто. Пожалуйста, помогите, если кто-нибудь столкнулся с подобной проблемой.

структура проекта

введите описание изображения здесь

angular.json

"myapp": {
  "projectType": "application",
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  },
  "root": "projects/myapp",
  "sourceRoot": "projects/myapp/src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/myapp",
        "index": "projects/myapp/src/index.html",
        "main": "projects/myapp/src/main.ts",
        "polyfills": "projects/myapp/src/polyfills.ts",
        "tsConfig": "projects/myapp/tsconfig.app.json",
        "aot": true,
        "assets": [
          "projects/myapp/src/favicon.ico",
          "projects/myapp/src/assets"
        ],
        "styles": [
          "projects/myapp/src/styles.scss",
          "projects/myapp/src/assets/theme/victor-theme/style.scss"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "projects/myapp/src/environments/environment.ts",
              "with": "projects/myapp/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },

CSS

.tree_status_ico:disabled {
    opacity: 0.6;
    background-size: 18px;
    background: transparent url(assets/img/agg_status.svg) no-repeat center;
}

после сборки ng

введите описание изображения здесь


person Aji    schedule 26.05.2021    source источник
comment
Есть ли ваше изображение в сборке ›your_app› assets ??   -  person Ravi Gajera    schedule 26.05.2021
comment
да, изображение есть в Myapp - ›src -› assets, но после сборки оно поступает в dist - ›assets -› img - ›agg_status.svg и dist-› agg_status.svg   -  person Aji    schedule 26.05.2021


Ответы (3)


Я создал тестовый проект с использованием Angular 12, и похоже, что у него такая же проблема. Но я нашел решение, которое должно работать:

  background: transparent url("/assets/img/agg_status.svg") no-repeat center;
person julianpoemp    schedule 01.06.2021
comment
Это не решение заданного вопроса. - person Puneet; 08.06.2021
comment
@Puneet это решение заданного вопроса! Он хочет предотвратить копирование изображения рядом с файлом index.html, и это решение делает это! И это одобрено спрашивающим: копируется прямо в dist. Таким образом, он дублируется, что также приводит к увеличению размера сборки. Верните свой отрицательный голос или объясните свое утверждение. - person julianpoemp; 08.06.2021
comment
Как можно исправить структуру каталогов проекта с помощью кода CSS? Это вопрос: подробности ниже. Даже изображение находится внутри папки с ресурсами. Он копируется прямо в dist. Таким образом, он дублируется, что также приводит к увеличению размера сборки. Как этого избежать? Мне нужно изображение только в папке с ресурсами. Снаружи должно быть чисто. Пожалуйста, помогите, если кто-нибудь столкнулся с подобной проблемой. - person Puneet; 08.06.2021
comment
@aji, не могли бы вы объяснить, как вышеуказанное решение решило вашу проблему? Если проблема заключалась в правильном отображении изображения и отсутствии исправления структуры каталога вашего проекта, обновите свой вопрос, и я могу удалить свой отрицательный голос за ответ и вопрос. - person Puneet; 08.06.2021
comment
@julianpoemp после изменения URL как / assets / .. изображение попадает только в dist / assets / image / ... не попадает прямо в / dist. моя проблема решена с помощью такого подхода. Я тоже проголосовал за фон: прозрачный URL (../ src / assets / img / agg_status.svg) no-repeat center; это давало изображение в dist / agg_status.svg - person Aji; 08.06.2021

Можете попробовать эти 2 варианта?

outputPath: dist, resourcesOutputPath: изображения

https://angular.io/cli/build

person shailesh kanbi    schedule 08.06.2021

Когда вы делаете ng build, angular CLI выполняет AOT (предварительную компиляцию) и конвертирует код вашего приложения angular в HTML, CSS и JS. Это то, что есть в вашей папке dist. Изображение в папке с ресурсами будет связано с тегом HTML IMG, а в свойстве src вы укажете путь к изображению, который будет 'assets / imgName.jpg'. Таким образом, часть скомпилированного кода также будет использовать тот же URL-адрес источника изображения. Таким образом, вы не можете избавиться от этой папки, потому что ваше приложение сломается, то есть изображение не будет получено, поскольку папка с ресурсами отсутствует в dist. Теперь возможное решение этой проблемы -

  1. Опубликуйте свое изображение в Интернете и используйте эту ссылку в качестве URL-адреса img src в файле CSS и удалите изображение из файла ресурса.
  2. В качестве альтернативы удалите строку projects / myapp / src / assets в массиве assets из файла angular.json и снова создайте приложение, но чтобы избежать сбоя вашего приложения, просто скопируйте и вставьте файл ресурсов в файл dist перед публикацией.

Массив активов, если вы последуете решению 2, будет

активы: [проекты / myapp / src / favicon.ico,],

person jesvin palatty    schedule 01.06.2021
comment
Проблема заключается не в том, чтобы избавиться от папки с ресурсами, почему изображение входит внутри и снаружи папки сборки, оно должно находиться только в папке с ресурсами, почему оно находится непосредственно в папке dist, см. изображение, о котором идет речь. также это не о тегах img и src, это упоминается в CSS - person Aji; 02.06.2021
comment
Попробуйте решение номер один, оно может решить проблему - person jesvin palatty; 02.06.2021