Angular 15升级后资产文件夹图片部署加载异常解决方案咨询

问题背景 #

原有Angular 6项目中，通过以下CSS代码引用背景图片：

.some-class { 
  background: url('asset/images/myimage.png');
}

该写法在本地开发及部署场景均正常运行。升级至Angular 15后，保留上述代码触发编译报错：

Can't resolve './assets/_css/assets/images/myimage.png'

已尝试方案及问题 #

• 使用~前缀写法：

  .some-class { 
    background: url('~asset/images/myimage.png');
  }
  

  问题：图片会被复制到根目录并添加哈希后缀（如myimage_2432432.png），不符合嵌入其他门户的目录结构要求。
• 使用相对路径写法：

  .some-class { 
    background: url('../../asset/images/myimage.png');
  }
  

  问题：效果与上述方案一致，文件仍被移至根目录，不可行。

核心需求 #

QA环境下需通过以下格式渲染图片（支持应用独立运行或嵌入其他门户）：

.some-class { 
  background: url('~/asset/images/myimage.png');
}

解决方案 #

1. 调整Angular静态资源配置（最简方案） #

修改angular.json，将asset/images目录纳入静态资源列表，并设置相对基准路径：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/asset/images" // 新增此行，确保图片目录保留原结构
            ],
            "baseHref": "./" // 适配嵌入门户的相对路径需求
          }
        }
      }
    }
  }
}

配置完成后，直接使用根相对路径引用图片：

.some-class { 
  background: url('/asset/images/myimage.png');
}

此方式会保留图片原目录结构，不会添加哈希后缀，同时兼容本地开发与部署场景。

2. 自定义Webpack配置（适配复杂场景） #

如果静态资源配置无法满足需求，可通过自定义Webpack规则实现路径解析与资源输出控制：

1. 安装自定义Webpack构建依赖：

npm install @angular-builders/custom-webpack --save-dev

2. 项目根目录创建webpack.config.js：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '~asset': path.resolve(__dirname, 'src/asset') // 配置路径别名
    }
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'asset/images/[name][ext]' // 强制保留原目录与文件名，禁用哈希
        }
      }
    ]
  }
};

3. 修改angular.json切换为自定义Webpack构建：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            // 保留原有其他配置
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server"
        }
      }
    }
  }
}

配置完成后，即可在CSS中使用~/asset/images/myimage.png的写法，Webpack会正确解析路径并保留原资源结构。

3. CSS变量统一管理路径（适配多环境切换） #

在全局样式文件（如src/styles.css）中定义路径变量：

:root {
  --image-base-url: '/asset/images/';
}

组件CSS中通过变量引用图片：

.some-class { 
  background: url(var(--image-base-url)myimage.png);
}

若需针对不同环境调整路径，可结合Angular环境配置（environment.ts/environment.prod.ts）动态注入变量值。

内容的提问来源于stack exchange，提问作者Dev Developer