Angular中span标签背景图片404及text/plain加载异常问题

首先咱们拆解下你遇到的核心问题：404资源未找到和资源以text/plain格式加载，其实后者是前者导致的——当服务器找不到资源时，通常会返回默认的text/plain类型错误页面，所以重点解决路径问题就能一并解决两个问题。

问题根源 #

1. CSS资源路径解析错误
   Angular构建项目时，会把src/assets目录下的资源复制到输出目录（比如dist）根路径的assets文件夹中。你当前CSS里写的url("src/assets/img/flags/flags.png")，浏览器会尝试请求http://你的域名/src/assets/...，但src目录在构建完成后不会被部署到服务器上，自然会触发404。

2. 不必要的HTML转义字符
   你CSS中使用了"（HTML转义的双引号），这会干扰浏览器对资源路径的解析，应该直接使用普通的单引号或双引号。

3. 资源未被Angular构建工具收录
   如果flags.png所在的目录没有配置到angular.json的assets数组中，Angular构建时不会自动把它复制到输出目录，也会导致404。

解决方案 #

1. 修正CSS路径与转义字符 #

把你的CSS代码修改为以下形式：

.iti-flag { 
  display: inline-block; 
  width: 20px; 
  height: 15px; 
  margin-right: 5px; 
  background-image: url('/assets/img/flags/flags.png'); 
  background-repeat: no-repeat; 
  background-color: #dbdbdb; 
  background-position: 20px 0; 
} 

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 
  .iti-flag { 
    background-image: url('/assets/img/flags/flags.png'); 
  } 
}

这里用了根相对路径/assets/...，不管你的CSS文件在哪个目录，浏览器都会从网站根目录查找assets文件夹下的资源，这是Angular项目引用静态资源的标准方式。

2. 确认Angular资源配置 #

打开项目根目录的angular.json文件，找到projects -> [你的项目名] -> architect -> build -> options -> assets，确保数组中包含src/assets（或更精确的src/assets/img/flags），示例配置如下：

"assets": [
  "src/favicon.ico",
  "src/assets"
]

这样Angular构建时会自动把src/assets下的所有文件复制到输出目录的assets文件夹中。

3. 验证路径正确性 #

修改完成后，重启Angular开发服务器（执行ng serve），然后在浏览器网络面板查看图片请求路径，开发环境下应为http://localhost:4200/assets/img/flags/flags.png，如果该路径能正常访问到图片，说明问题已解决。

调整后背景图会正常加载，text/plain格式的问题也会随之消失——因为服务器能找到图片资源，会返回正确的image/png类型。

内容的提问来源于stack exchange，提问作者kianoush dortaj