javascript - navigationend - router events subscribe angular 4

Angular 2 img src en una ruta relativa

Question

La guía de estilo de johnpapa Angular 2 sugiere un enfoque de folder-by-feature . Tengo la idea, puedes hacer pequeños componentes angulares independientes que pueden reutilizarse.

Entonces, hice un componente que quería reutilizar en otro proyecto y lo puse en su propia carpeta. También agregué una imagen que quería que este componente se muestre en la misma carpeta, por lo que es completamente autónomo.

<img class="logo" src="logo.png"/>

Pero esto intenta cargar la imagen desde la raíz localhost:3000/logo.png .

Supongo que esto significa que realmente tengo que usar la ruta exacta a la imagen, pero ¿esto no socava la idea general de los componentes que otras personas pueden reutilizar en otro proyecto?

Sugerencias sobre esto?

Editar para aclarar Estoy utilizando la estructura de carpetas del inicio rápido de Angular 2, lo que significa que mi carpeta raíz es:

app/
node_modules/
index.html
package.json
tsconfig.json

Entonces, incluso si uso el encabezado / logo.png de la ruta, no funciona. Tengo que hacer app / header / logo.png. Esta es efectivamente una ruta absoluta, y de hecho funciona igual de bien si agrego una barra diagonal inicial: "/app/header/logo.png". Cualquier cosa menos que el camino completo rompe el enlace. Significando que si alguien quisiera reutilizar esto, tendrían que tener exactamente la misma estructura de carpetas.

Supongo que así es como funciona, solo estoy aprendiendo Angular 2, pero en mi mente debería poder cargar recursos desde una carpeta de componentes al igual que con la plantilla o css

Answer 1

Echa un vistazo a esta respuesta: cómo servir imágenes en angular2

La clave es colocarlo en la carpeta "elementos" o editar su archivo ".angular-cli.json" (sección de recursos) para incluir la ubicación donde se encuentra la imagen. Esto también es válido para otros recursos que se supone que deben ser servidos, es decir, hojas de estilo.

Answer 2

Estoy usando un paquete web y he podido superar este problema al require la imagen en el componente como una variable y usarla en mi plantilla.

Esto se debe a que durante la fase de agrupación, el paquete web cargará el recurso y almacenará la URL correcta y las llamadas requeridas en el tiempo de ejecución obtendrán esta URL correcta para pasar a la plantilla.

Ejemplo

Usando la siguiente estructura de directorios

app/
    header/
        header.component.ts
        header.component.html
        assets/
            logo.png
...

header.component.ts

...
@Component({
    selector: ''header'',
    templateUrl: ''./header.component.html'', // Auto required by webpack
})
export class HeaderComponent {
    private LOGO = require("./assets/logo.png");

    constructor() {};
}

header.component.html

<div>
    <img [src]="LOGO" />
</div>

Es cierto que esto une el componente y la plantilla, pero el requisito debe estar en el componente para que el paquete web pueda analizarlo y cargarlo al agruparlo.

Con este enfoque, he empaquetado mi módulo con npm y lo he instalado y usado en otro proyecto, que también utiliza un paquete web.

Todavía tengo que probar con SystemJS.

Answer 3

Si el problema es un error 404, necesita cambiar su ruta

desde ruta / imagen ( raíz / ruta / imagen , / ruta / imagen, etc.)

a ./ruta/imagen

Entonces debería funcionar si no hay otros problemas.

Answer 4

Solucionaría este problema dividiendo la ruta src en 2 partes, como esta:

<img class="logo" [src]="(imgPath + imgFileName)" />

Luego, dentro de la definición del componente, se establece:

@Input() imgPath:string = "app/header/";
imgFileName:string = "logo.png";

Al usar el decorador @Input (), la variable imgPath puede verse externamente, de modo que en caso de que mueva el componente a otro lugar, puede establecer una ruta diferente, haciendo que el componente sea reutilizable.

Answer 5

Use una carpeta de activos en su raíz que contenga la imagen del logotipo