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

Question

当我执行 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

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

Answer 1

试试这个：

导入并注入 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">

希望这对您有所帮助。

Answer 2

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

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

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

Image not loading on ionic serve due to path problem in Ionic 4

ionic-framework

ionic4