Question

我正在尝试显示一个svg图像，其中图像的路径是从父组件传递下来的。像这样：

父HTML：

<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>

组件：

@Component({
    selector: 'dashboard-button',
    templateUrl: './dashboard-button.component.html',
    styleUrls: ['./dashboard-button.component.scss']

})

export class DashboardButtonComponent {

    @Input() btnImg: string;

}

HTML：

<div class="dash-button__body">
        <img class="dash-button__body-img" [src]="btnImg">
        <p class="dash-button__body-title">{{btnImg}}</p>
    </div>

我只能看到空的img图标和svg被下载为text / html而不是svg + xml，就像我正在使用的所有其他svg一样。路径是正确的，因为如果我将路径直接放入源中，我可以看到图像。我做错了什么？

Angular 2 svg图像显示为空白图像

0 个答案: