Angular 13加载服务器图片报错net::ERR_INVALID_URL求助

核心错误原因 #

你错误地将data:image/png;base64,前缀与HTTP文件URL拼接在一起——这个前缀仅适用于base64编码的图片内容，不能用于普通的服务器文件路径，这直接导致了net::ERR_INVALID_URL错误。

分步解决步骤 #

1. 修正图片URL拼接逻辑

去掉多余的base64前缀，直接拼接服务器地址与图片路径。注意后端返回的coverimage如果包含./前缀，需要替换为绝对路径格式：

• 若result.coverimage值为./assets/book1.png，最终需生成http://localhost:3000/assets/book1.png

2. 调整HTML代码

修改img标签的[src]绑定，正确拼接URL后再通过safeurl管道处理：

<div class="grid" *ngFor="let result of results">
  <div class="blog-card spring-fever" style="padding: 0.5rem; z-index: 100">
    <div>
      <img
        class="image"
        [src]="'http://localhost:3000/' + result.coverimage.replace('./', '') | safeurl"
        alt="书籍封面"
        height="400px"
        width="250px"
        style="border: 1px solid red"
      />
    </div>
  </div>
</div>

其中replace('./', '')用于移除路径中的相对前缀，确保URL格式合法。

3. 验证后端静态文件可访问性

直接在浏览器地址栏输入拼接后的完整URL（例如http://localhost:3000/assets/book1.png），确认图片能正常加载。如果无法打开，说明后端未正确配置静态文件托管，需先修复服务器端的静态资源访问规则。

4. 可选：用环境变量管理服务器地址

避免硬编码地址，在environment.ts中配置服务器基础地址：

export const environment = {
  production: false,
  serverBaseUrl: 'http://localhost:3000'
};

组件中导入后使用：

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

HTML代码修改为：

[src]="environment.serverBaseUrl + '/' + result.coverimage.replace('./', '') | safeurl"

关键注意事项 #

• 仅当图片内容是base64编码字符串时，才需要添加data:image/xxx;base64,前缀；普通服务器文件URL无需使用该前缀。
• 如果后端返回的coverimage已经是完整的HTTP URL（例如http://localhost:3000/assets/book1.png），直接使用[src]="result.coverimage | safeurl"即可。

内容的提问来源于stack exchange，提问作者M Nouman