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'');
}