Angular 2中父组件传路径的SVG图片显示空白问题

你遇到的问题我之前做Angular项目时也碰到过——父组件传SVG路径给子组件，结果图标显示空白对吧？别着急，咱们一步步来排查：

1. 先确认子组件有没有正确接收并绑定路径 #

首先得保证子组件的TS文件里正确声明了输入属性，不然父组件传的值根本接不到：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'dashboard-button',
  templateUrl: './dashboard-button.component.html'
})
export class DashboardButtonComponent {
  @Input() btnImg!: string; // 必须用@Input()标记这个属性，才能接收父组件传的值
}

然后子组件的HTML模板里，要把这个路径绑定到图片标签上，比如用<img>：

<img [src]="btnImg" alt="Dashboard Button Icon" />

要是你用的是<svg>标签直接嵌入，那得用其他方式，但<img>是最直接的，先试试这个。

2. 路径问题！这是最常见的坑 #

你父组件里写的../../../../assets/...是相对路径，这个路径是相对于父组件的位置来解析的，但传递给子组件后，子组件的模板是从自己的位置出发找文件的，路径层级肯定不对！

举个例子：如果父组件在src/app/home，子组件在src/app/components/dashboard-button，父组件往上走4级到assets，但子组件可能只需要往上走3级就到了，路径自然错了。

解决办法很简单：改用绝对路径，从assets根目录开始，开头加个斜杠：

<div class="home__top-right">
  <dashboard-button btnImg="/assets/dashboard/Hex_Cube_White.svg"></dashboard-button>
  <dashboard-button btnImg="/assets/dashboard/Hex_Cube_White.svg"></dashboard-button>
</div>

这样不管子组件在哪个位置，Angular都会直接从项目根目录的assets文件夹找文件，绝对不会错。

3. 检查SVG文件本身有没有问题 #

有时候不是代码的锅，是SVG文件自己的问题：

• 比如viewBox属性设置得不对，导致图形被移出了可视区域，看起来就是空白
• 或者SVG里的元素填充色是透明，和背景色完全一样
• 甚至文件损坏了

你可以直接在浏览器地址栏输入SVG的绝对路径（比如http://localhost:4200/assets/dashboard/Hex_Cube_White.svg），看看能不能正常显示。如果显示不出来，那就是SVG文件的问题，打开SVG文件调整下viewBox或者填充色就行。

4. 确认Angular的assets配置没漏 #

最后要检查下angular.json里的assets配置，确保包含了你的SVG所在的目录：

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

要是没把src/assets加进去，Angular打包的时候不会把这个文件夹里的文件带进去，浏览器自然找不到SVG，显示空白。

以上几个步骤排查下来，基本就能解决问题了！

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