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 inside the component. Replace first character of the 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 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);No need to change anything in the template.