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

【问题标题】：replace `iframe` in html with a simple jpg用简单的 jpg 替换 html 中的 `iframe`
【发布时间】：2020-11-07 21:17:33
【问题描述】：

我有一个预建的 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。

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

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

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

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

【问题讨论】：

标签： html css iframe hugo toml

【解决方案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=，我会全力以赴。我想我可以尝试计算出图像保存位置的相对路径，但我不确定如何备份目录树。

【讨论】：