Si su carpeta de assets está dentro de la carpeta src , intente esto:

 background: url("~src/assets/images/some/path/image.png")

Esta solución funcionará con base-href

¿No estás realmente seguro de qué ha cambiado en Angular 10?

Pero encontré tres soluciones. La primera solución que sabía funcionaría, pero lleva tiempo implementarla en una aplicación de tamaño medio existente . Pero si solo tiene unos pocos activos para reparar, debe optar solo por la primera solución.

Solución 1: uso de la ruta de activos relativa (recomendado)

La solución es usar la ruta relativa (desde su archivo .scss ) de sus activos. Básicamente agregando ../ hasta llegar a la carpeta de assets .

 :host { display: block; min-height: 500px; // Using relative path background: url('../../../assets/images/about-us.png') no-repeat center; }

ventajas

1. Este enfoque permite el hash de sus activos estáticos. Una vez que se crea su aplicación (usando ng build --prod ), la URL de su activo se reemplazará con un hash MD5 para romper el almacenamiento en caché.

   Entonces tu URL

    background: url('../../../assets/images/about-us.png') no-repeat center;

   será reemplazado como

    background: url('about-us.add9979f32e1c969e6f8.png') no-repeat center;

   Esto es básicamente una suma de comprobación MD5 del contenido de la imagen. Básicamente, cuando la imagen cambia incluso en un píxel, esta suma de verificación se cambiará por Angular. Esto le ayuda a explotar el almacenamiento en caché en el futuro cuando cambia su imagen y mantiene el mismo nombre de archivo.

   Lea más aquí para el conocimiento.

2. IDE (utilizo IntelliJ IDEA) no muestra errores de los activos en sus archivos SCSS, lo que significa que si la ruta del archivo es incorrecta, IDE se lo informará con anticipación.

   

3. Obtienes la vinculación del directorio. Eso significa que si presiono Ctrl y hago clic en un directorio en la URL anterior, IDE abrirá ese directorio.

Contras

1. ( Manejable ) Este podría ser un enfoque engorroso ya que el desarrollador tiene que escribir el activo que debe ser relativo a la carpeta de activos.

2. ( Manejable ) El activo con hash (imagen en este caso) se copiará en la carpeta raíz en el directorio de compilación (es decir, dist por defecto) que podría fallar en cualquier tipo de reglas de URL (por ejemplo, reglas de almacenamiento en caché). Así que en lugar de-

    https://example.com/assets/images/about-us.png

   se utilizará la siguiente URL-

    https://example.com/about-us.add9979f32e1c969e6f8.png

3. ( Manejable ) Si cambia la ruta de su componente, también debe cambiar la URL de la imagen.

Solución 2 - Solución rápida

Basado en la respuesta publicada aquí https://github.com/angular/angular-cli/issues/10004#issuecomment-375969537 , agregar / delante de la URL funcionó.

 :host { display: block; min-height: 500px; background: url('/assets/images/about-us.png') no-repeat center; }

ventajas

1. No tiene que agregar muchos prefijos ../ para convertirlo en una URL relativa.
2. Si cambia la ruta de su archivo SCSS componente, no tiene que cambiar la ruta de sus activos en url("") .

Contras

1. La segunda solución no funcionará en la compilación de producción si se --base-href (como se indica aquí ). angular-cli#18043 .

2. Su IDE sigue mostrando el error de ruta incluso si la ruta es correcta.

   

3. No obtiene las URL codificadas para reventar el caché (a diferencia de la solución 1)

Solución 3: engañar al procesador Angular CLI (no recomendado)

Investigué el código CLI y descubrí que si una URL comienza con ^ , Angular ignora el activo al pasar por alto la URL.

 :host { display: block; min-height: 500px; background: url('^assets/images/about-us.png') no-repeat center; }

Código fuente: https://github.com/angular/angular-cli/blob/v10.0.0/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/postcss-cli-resources.ts#L72

ventajas

1. No tiene que agregar muchos prefijos ../ para convertirlo en una URL relativa.

2. Si cambia la ruta de su archivo SCSS componente, no tiene que cambiar la ruta de sus activos en url("") .

Contras

1. Esta solución podría eliminarse en versiones futuras, como lo indicó uno de los desarrolladores de Angular CLI en el n.º 18013 (comentario)