servidor - instalar angular 6

Usar Angular CLI y no poder usar rutas de imagen relativas en archivos CSS

Question

Configure una aplicación angular utilizando la CLI angular y cree un componente que tiene una imagen en el directorio de componentes.

Por ejemplo:

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

Dentro del archivo CSS estoy usando el siguiente estilo:

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

Cuando ejecuto la aplicación, me da un 304 No modificado y la imagen no aparece en la vista previa. Si utilizo una ruta absoluta ''/ src / app / common-components / header / images'' el archivo se carga correctamente. Sin embargo, esto no es ideal, ya que me gustaría que el componente fuera autosuficiente.

La respuesta que se da es:

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

Con una vista previa en blanco

Answer 1

Parece que sigue siendo un problema con angular-CLI y webpack (usando 1.0.3).

Si agrega la carpeta de activos a angular-cli.json y define la ruta relativamente, la compilación aún falla, al no encontrar la url(''someRelativeLink'') recursos url(''someRelativeLink'') .

Utilicé una solución y puse todas las definiciones de CSS en:

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

En lugar de un archivo styleUrls .

Después de hacer eso todo estaba bien.

Answer 2

Todos los archivos / directorios de activos estáticos deben estar listados en el archivo angular-cli.json .

Añadiendo activos

Para agregar sus activos puede:

• Coloque su archivo de imagen en la carpeta de assets defecto (que ya figura en el archivo angular-cli.json .
• O agregue un nuevo directorio dentro de la app/ (por ejemplo, en su caso, podría usar la app/images , y luego haga referencia a eso en angular-cli.json )

angular-cli.json:

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

Archivos de referencia

Al igual que @ jali-ai que se menciona en los comentarios background-url debe ser background-image y puedes referirte a tu activo de esta manera:

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

Aquí hay un ejemplo del archivo angular-cli.json y una reference a un activo

Answer 3

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