用简单的 jpg 替换 html 中的 `iframe`

Question

我有一个预建的 Hugo 网站模板，其中一个页面的 HTML 中有一个 iframe（来自 Google 地图）。

                    <div class="map">
                        <iframe src="https://www.google.com/maps/embed?...."
                            width="100%" height="400" frameborder="0" style="border:0" allowfullscreen></iframe> 
                    </div>

生成的网页的布局正是我想要的输出，但我想用静态 jpg 替换 iframe。

我想要 link 的静态 jpg 在不同的页面上（但属于同一个预构建的 Hugo 模板站点的一部分），它似乎是由 *.toml 文件生成的：

[params.about]
image   = "images/about/photo1.jpg"

不幸的是，我不知道任何 HTML 或任何 toml。我有什么简单的方法可以用 jpg 替换 iframe 吗？

或者如果它不像简单的剪切和粘贴那么简单，我是否应该阅读 HTML 的某些特定方面？

Answer 1

这可能不是最佳答案，但如果有人正在寻找解决此类问题的方法，这就是我所做的。

我最终将 jpg 上传到 imgur，然后用一个简单的 img 标签更改 iframe 标签：

                    <div class="map">
                        <img src="https://www.imgur.com/...."
                            width="100%" height="400" frameborder="0" style="border:0" allowfullscreen></img> 
                    </div>

如果有人有更好的解决方案，这样我就不必从像 imgur 这样的网站上参考 src=，我会洗耳恭听。我想我可以尝试计算出图像保存位置的相对路径，但我不确定如何返回目录树。

用简单的 jpg 替换 html 中的 `iframe`

replace `iframe` in html with a simple jpg

html

css

iframe

hugo

toml