Использование Angular CLI и неспособность использовать относительные пути изображения в файлах CSS

Установили приложение angular с помощью angular CLI и создали компонент, у которого есть изображение в каталоге компонентов.

Например:

app/
---/common-components
------/header
---------/header.component.ts
---------/header.component.css
---------/images
--------------/image.png

В файле CSS я использую следующий стиль:

.image {
    background-url: url('images/image.png');
}

Когда я запускаю приложение, он дает мне 304 Not Modified и изображение не отображает int he preview. Если я использую абсолютный путь '/src/app/common-components/header/images', файл загружается правильно. Однако это не идеально, так как я хотел бы, чтобы компонент был самодостаточным.

Ответ:

Request URL:http://localhost:4201/images/test-image.jpeg
Request Method:GET
Status Code:304 Not Modified
Remote Address:127.0.0.1:4201

С предварительным просмотром

Ответы

Ответ 1

Все файлы/каталоги статических активов должны быть перечислены в файле angular-cli.json.

Добавление активов

Чтобы добавить свои активы, вы можете:

  • Поместите файл изображения в папку по умолчанию assets (которая уже указана в файле angular-cli.json.
  • Или добавьте новый каталог внутри app/ (например, в вашем случае вы можете использовать app/images, а затем ссылаться на angular-cli.json)

angular -cli.json:

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "images"
      ]
    }
  ]
}

Ссылки на файлы

Как @jali-ai, упомянутый в комментариях, background-url должен быть background-image, и вы можете ссылаться на свой актив следующим образом:

.image {
   background-image: url('images/image.png'); 
}

Вот пример angular -cli.json file и ссылка на ресурс

Ответ 2

Кажется, что проблема с angular -CLI и webpack (с использованием 1.0.3).

Если вы добавите папку ресурса в angular-cli.json и определите путь относительно, сборка все еще не работает, не найдя ressources url('someRelativeLink').

Я использовал работу и поместил все определения CSS в:

@Component({
  styles: [...]
})

Вместо файла styleUrls.

После того, как все было хорошо.

Ответ 3

.image {
    background-image: url('./assets/images/image.png'); 
}