Относительный путь не учитывается для фонового изображения, настроенного в компоненте css при использовании приложения Angular - PullRequest
Новая
       9

Относительный путь не учитывается для фонового изображения, настроенного в компоненте css при использовании приложения Angular

0 голосов
/ 01 марта 2019

У меня есть два div с идентификатором div1 и div2, мне нужно установить для них два разных фоновых изображения , изображения имеют одинаковое имя, но расположены в разных папках, поэтому янастроено, как показано ниже,

app.component.html: 

<div id="div1"></div>
<div id="div2"></div>

app.component.css:

background-image с разными путями для каждого div. 

#div1 {
  background-image: url('../assets/images/videos/back.jpg');
  /* other styles */
}

#div2 {
  background-image: url('../assets/images/blogs/back.jpg');
   /* other styles */
}

Проблема:

Оба div показывают одно и то же фоновое изображение, пока я обслуживаю приложение, используя ng serve.

Обратите внимание, что путь к обоим изображениям различен, но имя одинаково

Причина:

При регистрацииСредства разработки браузера, стиль выглядит следующим образом: 

#div1 [_ngcontent-c0] {
    background-image: url(back.jpg);
    /* other styles */
}

#div2 [_ngcontent-c0] {
        background-image: url(back.jpg);
        /* other styles */
}

, то есть вместо url('../assets/images/blogs/back.jpg') он идет как url(back.jpg) - без относительного пути, следовательно, оба показывают одно и то же изображение вbackground.

Вопрос:

Это ожидаемое поведение для угловых?Если не то, что мне здесь не хватает?

1 Ответ

0 голосов
/ 01 марта 2019

Относительные пути в CSS должны относиться к базовому URL, а не к компоненту в каталоге src.Поэтому удалите начальный .. из пути, но убедитесь, что у вас есть начальный слеш: 

#div1 {
  background-image: url('/assets/images/videos/back.jpg');
}

#div2 {
  background-image: url('/assets/images/blogs/back.jpg');
}

Основываясь на экспериментах, я вижу, что при использовании пути относительно исходного кода CLI создаеткопия ссылочного изображения и удаляет его в корень папки dist.Это приводит к тому, что папка dist выглядит следующим образом: 

/dist
  // This is the image that the CLI created 
  // and your component is referencing, but 
  // you want to reference the images in the
  // assets folder.
  back.jpg
  /assets
      /images
          /videos
              back.jpg
          /blogs
              back.jpg
...