1. Obtuve una solicitud HTTP, respuesta JSON, del backend localhost: 3000 (valor ingresado usando wysiwyg)
{ "Description": "<img alt="" src="~/media/Banner/plane.JPG" />1 test berita<br />\r\n&nbsp;" }2. en Angular html,
<div [innerHTML]="data.description | safeHtml"></div>(ya decodificado en component.ts)
3. En el navegador,
<div> <img alt="" src="~/media/Banner/plane.JPG">1 test berita<br> </div>4. El error es
GET http://localhost:4200/~/media/Banner/plane.JPG 404 (Not Found) Ese error se debe a que la URL estaba equivocada. Debería usar la URL de back-end http://localhost:3000/media/Banner/plane.JPG
Quiero reemplazar cada ~ con http://localhost:3000 .
<img alt="" src="~/media/Banner/plane.JPG">PASO 1
Defina backend_URL en el archivo environment.ts :
export const environment = { backend_URL: 'http://localhost:3000/' };PASO 2
Importe environment de environment.ts dentro del componente. Reemplace el primer carácter de data.src con environment.backend_URL .
import { environment } from '../environments/environment'; ... public backend_URL = environment.backend_URL; ... data.src = this.backend_url + data.src.substring(1);PASO 3
Utilice data.src en el componente.
<img src="{{ data.src}}">En el archivo ts:
// This could be from your environment file const backendURL ="http://localhost:3000"; const obj = { "Description": "<img alt="" src="~/media/Banner/plane.JPG" />1 test berita<br />\r\n&nbsp;" }; obj['Description'] = obj['Description'].replaceAll('~', backendURL); console.log(obj);No es necesario cambiar nada en la plantilla.