图像未在 <img> 标记中加载 ftp url

Posted 2023-04-24

【中文标题】图像未在 <img> 标记中加载 ftp url

【英文标题】：Image is not loading in <img> tag with ftp url

【发布时间】：2017-05-08 19:34:04

【问题描述】：

我正在尝试使用 img 标签在我的 ionic/cordova 应用程序中显示用户的照片，如下所示，

 <img src="ftp://10.132.21.100/PatientPhoto/Temp_emp.jpg" />

图片没有在APP中显示（资源加载失败错误）。但是如果我在我的 android 移动浏览器中输入相同的 URL（ftp://10.132.21.100/PatientPhoto/Temp_emp.jpg），我可以查看图像。我正在运行调试版本，所以我想这不是权限问题。我通过在 config.xml 文件中添加以下行来完成白名单，

<access origin="*"/>

我也尝试添加以下行，但没有任何成功，

<allow-intent href="ftp://*/*" />
<allow-navigation href="ftp://*/*" />

还在html文件中添加了Content-Security-Policy，如下，仍然面临同样的问题。

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

如果我为 img src 使用 http URL，它就可以工作。图像存储在 ftp 服务器中，所以我不能使用 http URL。任何建议都非常感谢。

【问题讨论】：

请添加一些代码

@Neotrixs，添加代码

我建议您最好将“FTP”更改为“HTTP”，还有一件事，请在配置文件中授予 URL 权限。

URL 应该用引号引起来。一些浏览器可能会让这种情况发生，但您的应用可能不会那么宽容。

您在 android 或 ios 中遇到过这个问题？

【参考方案1】：

您需要安装cordova whitelist plugin 并配置您的config.xml 文件。

请添加以下标签：<allow-intent href="ftp://*/*" />

或者如果你想允许一切：<access origin="*">

【讨论】：

即使在将 添加到 config.xml 文件后也会出现同样的问题

【参考方案2】：

您可以尝试像这样修改您的 src 属性：

 <img src="ftp://yourusername:yourpassword@10.132.21.100/PatientPhoto/Temp_emp.jpg"/>

它会起作用，但你会给每个人你的 ftp 密码。不要在实时网站上使用它

【讨论】：

您可以创建一个匿名/访客帐户，使用任何密码

【参考方案3】：

您是否有内容安全策略标头：

<meta http-equiv="Content-Security-Policy" />

您需要在显示图像的页面上使用它。

请参阅以下链接以获取指针：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/#content-security-policy

【讨论】：

是的。我添加了 Content-Security-Policy。还是一样的问题

尝试将 img-src * 添加到您的 CSP 中

我试过了，还是不行。

【参考方案4】：

在“”和确保您的服务器正在运行之间提供 src

【讨论】：

引号 ("") 也有同样的问题

想知道你是否解决了这个问题。我有一个类似的问题。使用上面提到的代码<img src="ftp://yourusername:yourpassword@10.132.21.100/PatientPhoto/Temp_emp.jpg"/> 在除 Firefox 之外的任何浏览器中都适用于我。我想知道是否有可能让它在Firefox中工作。不过，我确实使用 iframe 让它工作。