静态图片在使用飞碟和thymeleaf生成的PDF文件中无法显示。

Question

我使用thymeleaf作为模板引擎将XHTML映射到HTML，并使用飞碟生成PDF文件。

现在，我无法在生成的PDF文件中显示位于/src/main/resources/下的静态图像。文件本身显示正常，只有图像消失了。

即使是其他位置，例如/src/main/resources/static或/src/main/resources/public也没有帮助。

我的HTML / XHTML如下：

<img src="images/logo_black.png"></img>
        <img src="/images/logo_black.png"></img>
        <img alt="mastercard" th:src="@{classpath:static/images/logo_black.png}" />

        <div data-src="images/logo_black.png"></div>
        <div data-src="/images/logo_black.png"></div>
        <div data-src="@{classpath:static/images/logo_black.png}"></div>

它们都没有正常工作。

这些图片本身可以通过localhost:8048/logo_black.png访问。

我不想使用完整的URL (http://..) 来引用我的图片。

- user7307131

Answer 1

您可以从任何URL（来自互联网或文件系统）包含资源。无论哪种方式，都需要几个步骤：

从Thymeleaf模板生成HTML时，您可以使用：

- @{/some/url} 解析相对于Web上下文的路径（假设您有一个Web上下文），或者 - @{classpath:/some/url} 将URL保留为 classpath:/some/url，或者 - 仅是字符串值常量或变量值（${var}），无论是绝对URL https://some/url 还是相对URL，Thymleaf 都会在生成的HTML中保持它们不变。

在将HTML传递给Flying Saucer之前，请确保URL正确。然后Flying Saucer将使用UserAgentCallback（默认为ITextUserAgent）处理所有URL。 UserAgentCallBack中的相关方法是resolveURI和setBaseURL。

在ITextUserAgent的默认resolveURI方法（从NaiveUserAgent继承）中存在一些奇怪的逻辑。如果baseURL为null，它将尝试设置它，因此最好始终自己设置。我通过覆盖resolveURI获得了更好的结果，以下内容足以保持绝对URL并将相对URL解析为相对于baseURL：

@Override
public String resolveURI(String uri) {
   if (URI(uri).isAbsolute())
       return uri;
   else
       return Paths.get(getBaseURL(), uri).toUri().toString();
}

最后，为了解决classpath:协议，您需要定义一个URLStreamHandler，除非已经定义了一个（例如，Spring Boot的嵌入式Tomcat已经支持此功能）。

- Dario Seidl

Answer 2

您可以使用base64来渲染图像。只需将您的图像转换为base64格式，它就会显示在您的网页和移动视图上。标签如下：

<img th:src="@{data:image/png ;base64,your base 64}"/>

- Gaurav Jestha

Answer 3

你可以选择指定完整的文件路径，而不是在Thymeleaf图像源属性中使用相对路径“images/logo_black.png”。为了实现这一点，你可以在项目的“resources”文件夹中创建一个名为“templates”的目录。在这个“templates”目录中，你可以将你的图像放在一个名为“images”的子目录下。例如，你可以将其结构化如下：“templates/images/image.png”。

有了这个设置，你可以在Thymeleaf的th:src属性中使用完整路径引用图像，像这样：

<img th:src="@{classpath:/templates/images/image.png}" alt="image"/>

这种方法确保您提供了指向项目资源中图像的完整路径，提高了图像引用的清晰度和精确性。

- Jamshid SadiK