将 base64 字符串图像显示为超链接答案

【问题标题】：Display base64 string image as a hyperlink将 base64 字符串图像显示为超链接
【发布时间】：2017-04-12 14:12:29
【问题描述】：

我正在尝试将已转换为 base64 字符串的图像显示为“a href”标签内的链接。

Java 方法：

public void TakeScreenShot (String ScenarioName, String Description,JsonHtmlDataHelper jsonHtmlDataHelper)
{
    TakesScreenshot takeScreenshotDriver = (TakesScreenshot) driver;
    byte[] screenshotData = takeScreenshotDriver.getScreenshotAs(OutputType.BYTES);
    JsonObject jsonObjectHtmlReport = new JsonObject();
    jsonObjectHtmlReport.addProperty("ScenarioTest", ScenarioName);

    String imageData = Base64.encodeBase64String(screenshotData);
    String imgTag ="<img src=\"data:image/png;base64, " + imageData + "\" width=\"200\" height=\"150\"/>";
    System.out.println(imageData);
    jsonObjectHtmlReport.addProperty("TestStepDescription", imgTag);
    jsonObjectHtmlReport.addProperty("TestStepResult","PASSED");
    jsonHtmlDataHelper.AddProperty(jsonObjectHtmlReport);
}

上述方法以 HTML 格式正确显示图像，但我想添加一个链接，将页面重定向到此图像。根据要求，我不能将图像存储在任何地方。

我尝试了以下方法：

<a rel=\"group\" href='#' onclick=\"$.fancybox.open({href:'data:image/png;base64," +imageData + "'})\">Click here</a>;

<a width=\"550\" height=\"190\" href=/ onclick=\"onclick=location.href=\'data:image/png;base64," + imageData + "\'\">click here</a>;

<img src=\"data:image/png;base64, " + imageData + "\" width=\"200\" height=\"150\"/>;

【问题讨论】：

您不能将您的 imgTag 字符串修改为由标签包围吗？
创建一个服务器端 (java) uri，它将读出图像并将其打印到浏览器
它是一个普通的 .htm 文件，它不托管在服务器上。
@HarrisJT ：你能解释一下用标签包围字符串是什么意思吗？
@Vic 您想链接图像以重定向到该图像吗？没有存储它只需要 imgTag="" + ";

标签： java html css image base64

【解决方案1】：

你目前有这个：

String imgTag ="<img src=\"data:image/png;base64, " + imageData + "\" width=\"200\" height=\"150\"/>";

你可以用一个链接到data URL的<a>标签包围它：

String imgTag ="<a href=\"data:image/png;base64," + imageData + "\"><img src=\"data:image/png;base64," + imageData + "\" width=\"200\" height=\"150\"/></a>";

【讨论】：

感谢您的回答。我正在尝试在我的 React 项目中使用它并编写了以下代码 - <a target='_blank' href={'data:image/jpg;base64,' + this.state.schemeImageBase64}><img width='500px' src={'data:image/jpg;base64,' + this.state.schemeImageBase64}/></a>。图像显示正确，光标图标显示为链接，但是当我单击图像时 - 没有任何反应，只有控制台显示错误“不允许将顶部框架导航到数据 URL”。通过使用 JavaScript 打开带有 base64 图像的新标签来解决 - stackoverflow.com/a/46672702/1927853

【解决方案2】：

仅带有 href 链接的标签将打开空白页面。您需要将download="namefile.png" 添加到<a>

所以它看起来像这样：<a href="data:image/png;base64,..." download="abrakadabra_iLoveCats.jpg">download id</a>

【讨论】：