Ionic应用中background: url(~assets)路径失效问题求助

我在SCSS中编写了如下代码：

background: url('~assets/icons/refresh-btn.svg') no-repeat center transparent;

控制台报错信息：

Can't resolve 'assets/icons/refresh-btn.svg' in 'C:\pet\applications\streetkid-app\src\app\modules\layout\components\header'

请问该如何在Ionic应用中正确配置资源路径？

解决方案 #

1. 使用相对路径 #

根据当前SCSS文件的层级，计算到src/assets的相对路径。你的SCSS文件位于src/app/modules/layout/components/header，需要向上回溯到src目录再进入assets，路径写法如下：

background: url('../../../../../../assets/icons/refresh-btn.svg') no-repeat center transparent;

2. 使用Angular内置别名 #

Ionic基于Angular构建，默认配置了@作为src目录的别名，用这个别名更简洁直观：

background: url('@/assets/icons/refresh-btn.svg') no-repeat center transparent;

3. 确认资源目录配置 #

检查项目根目录下的angular.json文件，确保assets数组包含你的资源目录，配置示例：

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

如果有自定义资源目录，也要同步添加到该数组，确保构建工具能正确复制资源到输出目录。

4. 移除~符号 #

在Ionic+Angular环境中，~用于引用node_modules中的资源，不适合项目本地的assets目录，因此需要去掉路径中的~。

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