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?
4 respuestas
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í.
Intente agregar './' delante de los activos / ...
<img width="300" alt="Angular Logo" src="./assets/sample.jpg">
¿Quieres una imagen de fondo? esto funciona.
src
--app
--customComponent
--assets
En customComponent.css
:host{
background-image : url("~src/assets/equaljustice.PNG");
}
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.
Preguntas relacionadas
Preguntas vinculadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.