我想替换 ~ 成为 URL 后端，<img alt="" src="~/media/Banner/plane.JPG"> 404 not found答案

【问题标题】：i want replace ~ to become URL backend, <img alt="" src="~/media/Banner/plane.JPG"> 404 not found我想替换 ~ 成为 URL 后端，<img alt="" src="~/media/Banner/plane.JPG"> 404 not found
【发布时间】：2021-11-04 00:22:27
【问题描述】：

1.我得到了来自后端 localhost:3000 的 HTTP 请求，响应 JSON（使用所见即所得输入的值）

{
"Description": "&lt;img alt=&quot;&quot; src=&quot;~/media/Banner/plane.JPG&quot; /&gt;1 test berita&lt;br /&gt;\r\n&amp;nbsp;"
}

2. 在 Angular html 中，

<div [innerHTML]="data.description | safeHtml"></div>

（已经在component.ts中解码）

3.在浏览器中，

<div>
  <img alt="" src="~/media/Banner/plane.JPG">1 test berita<br>
  &nbsp;
</div>

4.错误是

GET http://localhost:4200/~/media/Banner/plane.JPG 404 (Not Found)

该错误是因为 URL 错误。它应该使用后端 URL http://localhost:3000/media/Banner/plane.JPG

我想用http://localhost:3000 替换每个~。

<img alt="" src="~/media/Banner/plane.JPG">

【问题讨论】：

您可以通过以下方式解决此问题： 1. 如果后端是您的，则仅从那里删除“~”符号。 2. 如果后端是 not 你的那么一些图像标签上的 id 并从 javascript 处理 src。

标签： javascript html angular typescript

【解决方案1】：

第 1 步

在environment.ts 文件中定义backend_URL：

export const environment = {
  backend_URL: 'http://localhost:3000/'
};

第 2 步

从组件内部的environment.ts 导入environment。将data.src 的第一个字符替换为environment.backend_URL。

import { environment } from '../environments/environment';

...

public backend_URL = environment.backend_URL;

...

data.src = this.backend_url + data.src.substring(1);

第 3 步

在组件中使用data.src。

<img src="{{ data.src}}">

【讨论】：

不太相信发帖者能够在没有帮助的情况下进行字符串替换。认为您需要添加使用 String#substr 来摆脱前缀
感谢您帮助我，但问题是，当我收到像 <img alt="" src="~/media/Banner/plane.JPG"><br><img alt="" src="~/media/Banner/train.JPG">（双 img）这样的 json 响应时。然后我使用管道在 html 中替换（/~/g，env.baseAPIurl），<div [innerHTML]="data.description | changetidetourl | safeHtml"></div> 并且它可以工作。

【解决方案2】：

在ts文件中：

// This could be from your environment file
const backendURL ="http://localhost:3000";

const obj = {
    "Description": "&lt;img alt=&quot;&quot; src=&quot;~/media/Banner/plane.JPG&quot; /&gt;1 test berita&lt;br /&gt;\r\n&amp;nbsp;"
};

obj['Description'] = obj['Description'].replaceAll('~', backendURL);

console.log(obj);

无需更改模板中的任何内容。

【讨论】：

你也可以在safeHtml 管道中进行替换
很高兴它有帮助。请考虑接受答案。
我打算添加与管道相关的答案，但我不知道您在管道中的代码。分享 safeHtml 管道代码。让我们看看我们是否可以在一个管道中做到这一点。而不是添加额外的 changetidetourl 管道
safeHTML just transform(value: string) { return this.sanitized.bypassSecurityTrustHtml(value); } 和 changetildetourl transform(url: any, args?: any): any { const replacement = url?.replace(/~/g, env.baseUrl); return replacement; }
为什么不能直接将 safeHTML 代码转换为 transform(value: string) { const value = value?.replace(/~/g, env.baseUrl) || ''; return this.sanitized.bypassSecurityTrustHtml(value); }