How can I use Model and Thymeleaf to add links to iframe src and href?

June 2, 2022

I have a simple html page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exchange</title>
</head>
<body>
<iframe src="..." width="980" height="560" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
<p><a href="..."></a></p>

</body>
</html>

If I manually insert links into iframe src and href, then the application displays the page normally, but if I do so :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exchange</title>
</head>
<body>
<iframe src="${baseUrl}" width="980" height="560" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
<p><a href="${embedUrl}"></a></p>

</body>
</html>

And then through the model I try to set these properties:

@Controller
@AllArgsConstructor
public class MyController {

    private final static Logger LOGGER = LoggerFactory.getLogger(MyController.class);
    @RequestMapping(value = "/test/{code}", method = GET)
    public String getGifByExchangeRate(@PathVariable String code, Model model){
        LOGGER.info("get test {} ",code);
        ...
        model.addAttribute("baseUrl",holder.getBaseUrl());
        model.addAttribute("embedUrl",holder.getEmbedUrl());
        return "myHome";
    }

Then the properties are not filled in and an error is issued.I don’t really understand how using Thymeleaf you can achieve this, so I will be glad to help.

>Solution :

Add the thymeleaf attributes to your source and it should start working for you.

Change

<iframe src="${baseUrl}" width="980" height="560" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
<p><a href="${embedUrl}"></a></p>

<iframe th:src="${baseUrl}" width="980" height="560" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
<p><a th:href="${embedUrl}"></a></p>

Thymeleaf uses these th:* attributes to know what needs to be run through the template engine.