1. I got HTTP Request, response JSON, from backend localhost:3000 (value inputed using wysiwyg)
{
"Description": "<img alt="" src="~/media/Banner/plane.JPG" />1 test berita<br />\r\n&nbsp;"
}
2. in Angular html,
<div [innerHTML]="data.description | safeHtml"></div>
(already decoded in component.ts)
3. In the browser,
<div>
<img alt="" src="~/media/Banner/plane.JPG">1 test berita<br>
</div>
4. The error is
GET http://localhost:4200/~/media/Banner/plane.JPG 404 (Not Found)
That error is because the URL was wrong. It should be using backend URL http://localhost:3000/media/Banner/plane.JPG
I want to replace every ~ with http://localhost:3000.
<img alt="" src="~/media/Banner/plane.JPG">
STEP 1
Define backend_URL in the environment.ts file:
export const environment = { backend_URL: 'http://localhost:3000/' };STEP 2
Import environment from environment.ts into the component. Replace the first character of data.src with environment.backend_URL .
import { environment } from '../environments/environment'; public backend_URL = environment.backend_URL; data.src = this.backend_url + data.src.substring(1);STEP 3
Use data.src in the component.
<img src="{{ data.src}}">In the ts file:
// 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);You don't need to change anything in the template.