Información sobre mi versión angular:
CLI angular: 7.3.9

Node: 10.15.3   
OS: win32 x64   
Angular: 7.2.15   
... animations, common, compiler, compiler-cli, core, forms   
... language-service, platform-browser, platform-browser-dynamic    
... router 

El problema al que me enfrento es:

En desarrollo / entorno de desarrollo:
Las imágenes en la carpeta assets de Angular no aparecen.
Cuando verifica la ruta, aparece como "http: // localhost: 4200 / assets / sample.jpg "con error HTTP 404 (no encontrado).
En la plantilla HTML se escribe como
<img width="300" alt="Angular Logo" src="assets/sample.jpg">
sample.jpg se encuentra en esta carpeta myapp/src/assets/sample.jpg

En compilación prod / entorno:
La carpeta assets no se compila y genera en la carpeta dist en sí misma, por lo tanto, no aparece aquí también.

Este es el caso incluso con un proyecto nuevo generado por Angular CLI. Esto también sucede con el favicon.

Esta es mi matriz assets en build y test en angular.json.

    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],

Verifiqué mi nombre de archivo y ruta.
Intenté crear un par de proyectos aislados en la misma máquina.

PS:
Ahora estoy empezando a dudar si se debe a alguna restricción de la máquina. Estoy trabajando en una máquina con configuración de acceso de usuario limitado. Podría ser ésta la razón? ¿Cualquier restricción a nivel del sistema puede evitar que se carguen las imágenes?

1
Temp O'rary 9 may. 2019 a las 17:53

4 respuestas

La mejor respuesta

Temp O'rary: esto definitivamente podría ser un problema de derechos de acceso, y de todo lo que leí, probablemente lo sea. Lo digo porque mencionas que la carpeta de activos no se compila y genera en la carpeta dist .

Intente crear o mover su proyecto a una unidad diferente. P.ej. El comentario de Frank en Angular 6 no puede cargar imágenes de los activos describe él almacenaba su código en BitBucket, lo que le estaba causando lo que parece el mismo problema que está experimentando.

También parece que tiene suficiente experiencia en tecnología para saber que la sensibilidad a mayúsculas y minúsculas en el archivo puede afectar las cosas, pero ... dado que está utilizando la CLI para generar el proyecto, creo que al menos debería ver activos en la versión compilada, y por lo tanto, probablemente este no sea el problema aquí.

1
Bytech 10 may. 2019 a las 07:44

Intente agregar './' delante de los activos / ...

<img width="300" alt="Angular Logo" src="./assets/sample.jpg">
1
Rene T 9 may. 2019 a las 15:51

¿Quieres una imagen de fondo? esto funciona.

src
--app
  --customComponent
--assets

En customComponent.css

:host{
  background-image : url("~src/assets/equaljustice.PNG");
}
0
John Peters 14 nov. 2019 a las 18:22

Se puede utilizar

<img width="300" alt="Angular Logo" src="../../assets/sample.jpg">

Cada "../" se refiere a un directorio antes de su directorio actual. por ejemplo, si está en src / app / someComponent debe usar "../../assets para obtener acceso a su directorio de activos porque los activos y src están en el mismo directorio.

0
Mohammadreza Imani 9 may. 2019 a las 16:35
56062183