如何用json2html将海报URL渲染为图片并设置可点击URL？

问题描述 #

我有两个技术问题需要解决，现有如下JSON格式的电影数据：

[
    {
        "id": 601,
        "imdb_id": "tt0068646",
        "imdb_rating": "9.2",
        "language": "English, Italian, Latin",
        "poster": "https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg",
        "title": "The Godfather",
        "year": 1972
    },
    {
        "id": 603,
        "imdb_id": "tt0071562",
        "imdb_rating": "9.0",
        "language": "English, Italian, Spanish, Latin, Sicilian",
        "poster": "https://m.media-amazon.com/images/M/MV5BMWMwMGQzZTItY2JlNC00OWZiLWIyMDctNDk2ZDQ2YjRjMWQ0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg",
        "title": "The Godfather Part II",
        "year": 1974
    },
    {
        "id": 622,
        "imdb_id": "tt0108052",
        "imdb_rating": "9.0",
        "language": "English, Hebrew, German, Polish, Latin",
        "poster": "https://m.media-amazon.com/images/M/MV5BNDE4OTMxMTctNmRhYy00NWE2LTg3YzItYTk3M2UwOTU5Njg4XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg",
        "title": "Schindler's List",
        "year": 1993
    }
]

我通过以下代码将其转换为HTML表格并在网页中渲染：

movies_data = get_recommended_movies().json
for movie_data in movies_data:
    imdb_id = movie_data["imdb_id"]
    movie_data["imdb_id"] = "https://www.imdb.com/title/" + imdb_id

#movies_data = json.dumps(get_recommended_movies().json)
html_data = json2html.convert(json=movies_data)
return html_data

目前网页已渲染出表格，需要解决两个问题：

1. 如何将表格中的poster字段的URL渲染为图片显示；
2. 如何将相关URL设置为可点击链接显示在表格中。

解决方案 #

1. 把poster字段渲染为图片 #

json2html默认会将字符串直接输出，要显示图片，需把poster字段的值替换为HTML的<img>标签，同时在转换时关闭转义功能：

movies_data = get_recommended_movies().json
for movie_data in movies_data:
    # 处理imdb_id为可点击链接（和第二个问题合并处理）
    imdb_id = movie_data["imdb_id"]
    movie_data["imdb_id"] = f'<a href="https://www.imdb.com/title/{imdb_id}" target="_blank">{imdb_id}</a>'
    
    # 处理poster为图片，可自定义图片宽度和alt文本
    poster_url = movie_data["poster"]
    movie_data["poster"] = f'<img src="{poster_url}" alt="海报：{movie_data["title"]}" style="width: 80px;"/>'

# 关键参数：escape=False，避免HTML标签被转义成纯文本
html_data = json2html.convert(json=movies_data, escape=False)
return html_data

2. 将URL设置为可点击链接 #

核心逻辑是把URL字段的值替换为HTML的<a>标签，同时必须开启escape=False参数，否则json2html会把<a>标签转义成字符串，无法正常渲染为链接。

比如处理imdb_id的代码中，我们把原imdb_id值替换成了带链接的HTML标签，这样转换后的表格里就会显示可点击的链接。如果还有其他URL字段需要处理，用同样的方式替换即可。

内容的提问来源于stack exchange，提问作者Phuc