Rotativa / Wkhtmltopdf图像不显示

Posted 2023-02-23

【中文标题】Rotativa / Wkhtmltopdf图像不显示

【英文标题】：Rotativa / Wkhtmltopdf images not displaying

【发布时间】：2012-12-19 02:23:04

【问题描述】：

我目前正在创建一个 MVC 4 Web 应用程序。

我有一个动作，它的基本背景图像始终相同，然后是一个箭头图像，该图像的度数根据动作中收集的信息而变化。

我使用

调用此操作

<img src="@Url.Action("trend-image", "NonReg_Reports")"    />

当它被调用并且只是显示一个 html 网页时，它可以正常工作。它给了我 HTML。

<img src="/nonreg-report/01495344/trend-image"   >

然后我使用 Rotativa / Wkhtmltopdf 将此 HTML 页面转换为 PDF。这运行与上面相同的代码。

问题是如果我使用上面的代码，我只会得到一个带有替代文本的白框。

如果我使用 <img src="~/Content/images/trend_back_medium.png" alt="astuff" /> 这是我项目中的实际背景图像，它可以正常工作。

上面代码中的图像由于其使用方式而无法保存在任何地方。我认为这是一个路径问题，但在尝试了很多不同的事情之后，我仍然无法让它工作。

任何建议或帮助将不胜感激谢谢。

【参考方案1】：

我遇到了同样的问题，我找到了一种解决方法，虽然不是很好，但它适合我的需要。

Rotativa(Wkhtmltopdf?) 似乎对从 http 处理程序返回的图像有问题（至少在我的情况下）。因此，为了处理这种情况，在返回new ViewAsPdf... 之前的控制器操作中，我的代码手动将文件保存到某个本地“temp”文件夹，并以服务器路径方式将渲染视图中的图像“src”替换为该本地文件的路径，例如：@ 987654322@。 这不是一个好的解决方案，如果您已经找到更好的解决方案，请告诉我。

【参考方案2】：

我发现在我的页面中，图像没有显示，因为它们是 .gif 文件。 Rotativa 可能会遇到 GIF 问题。 当我将图像更改为 .jpg 或 .png 时，一切正常。

【参考方案3】：

我认为这可能归结为基本上缺少“.png”位。

您可以添加这样的映射 /nonreg-report/01495344/trend-image.png » /nonreg-report/01495344/trend-image 并让两个网址都处于活动状态，为什么不呢？这样 wkhtmltopdf 就被愚弄了，您仍然拥有动态图像，而无需将其保存在磁盘上的任何位置。动态网址可以工作，我这样做是为了将 gif2png 实时转换为 wkhtmltopdf。

另外，拥有一个绝对网址可能会有所帮助，我认为您可以这样做：

src="@Url.Action("trend-image", "NonReg_Reports", null, Request.Url.Scheme)"

【参考方案4】：

我遇到了同样的问题。正常的 html 视图可以显示图片，pdf 不显示。我用Server.MapPath指向图片，没问题...

<img src="@Server.MapPath("~/Folder/SubFolder/Subfolder/ImageName.png")" />

希望对你有帮助

亚当

【讨论】：

谢谢！它帮助我解决了在我的布局中引用 css 文件时遇到的类似问题！！！

在 TD 上使用 style 属性可以在开发机器上正确显示图像，但不能在实时服务器上工作。我不得不求助于这种方法来让图像以 PDF 格式显示在 live box 上。匿名访问（正如一些人建议的那样）不是我在 live box 上的选项

【参考方案5】：

通过 css 似乎可以正常工作...

我试图在页面顶部显示一个徽标并用 div 切换它并将高度和宽度设置为图像的高度和宽度。

CSS：

div.logo 
    background-image: url("/images/logo/logo.png");
    height: 53px;
    width: 185px;

HTML：

<div class="logo"></div>

【参考方案6】：

将属性 [System.Web.Mvc.AllowAnonymous] 添加到返回图像的控制器方法中解决了我的问题。

【参考方案7】：

如果您要指定高度和宽度，请确保您应该将其写在样式标签中 喜欢<some-tag style="height: 100px; width:100px">

【讨论】：

这有什么帮助？