由于 Ionic 4 中的路径问题，图像未加载到离子服务上

Posted 2023-03-22

【中文标题】由于 Ionic 4 中的路径问题，图像未加载到离子服务上

【英文标题】：Image not loading on ionic serve due to path problem in Ionic 4

【发布时间】：2020-06-07 22:30:33

【问题描述】：

当我在做ionic serve 时，它会加载home.html。我在那里打电话给图像。出于某种原因，图像保存在xampp/htdocs/files/hydrocarbon_files/image001.gif

在普通 HTML 中，它可以很好地加载图像，但在 Ionic 项目中，图像路径显示为

http://localhost:8100/files/hydrocarbon_files/image001.gif

它不显示来自上面 url 的图像，因为最初的路径是 -

http://localhost:8100/files/hydrocarbon_files/image001.gif

我应该怎么做才能在本地加载图片？

【问题讨论】：

ionic 不支持外部路径。您必须将该图像复制到 ionic 项目的资产文件夹中，然后它才能工作。

工作，请将此作为答案发布，我会接受它

【参考方案1】：

ionic 不支持外部路径。您必须将该图像复制到 ionic 项目的资产文件夹中，然后它才能工作。 E.G

<img src="assets/img/imageName.png" >

【参考方案2】：

试试这个：

导入并注入 WebView 和 DomSanitizer。

import DomSanitizer from '@angular/platform-browser';
import WebView from '@ionic-native/ionic-webview/ngx';

constructor(private sanitizer: DomSanitizer,
            private webView: WebView) 

清理图像的 URL（例如，您可以在 ngOnInit 中进行）：

const uri = 'xampp/htdocs/files/hydrocarbon_files/image001.gif';
this.imgSrc = this.sanitizer.bypassSecurityTrustUrl(this.webView.convertFileSrc(uri));

然后在您的 html 中使用经过净化的源代码：

<img [src]="imgSrc">

希望这会有所帮助。