把新图片放进真实网页里预览
用本地文件或图片 URL 替换网页上的现有图片,立即检查尺寸、裁切和整体观感。适合广告图、商品图、头像和首屏视觉的快速确认。
支持 Chrome 和 Microsoft Edge · 免费开始 · 无需注册
实现前先看真实效果
上传或粘贴链接
既可以选择电脑中的图片,也可以使用已经上线的图片 URL。
保留原有布局
在网页现有尺寸、间距和上下文中观察新图片。
只做本地预览
替换仅在浏览器中显示,不会改动网站源文件。
导入图片、选择适配方式,再直接在网页上调整大小
“更改图片”不只是一次简单替换。你可以导入本地文件或图片 URL,决定替换后是否保持原布局,并通过手柄直接调整已经替换的图片。
根据素材来源选择导入方式
既可以上传电脑里的图片,也可以粘贴以 http 或 https 开头的图片 URL。保存前,Edit Page 会先确认该 URL 能够作为图片加载。
- 加载失败的 URL 会被拒绝,不会在预览中留下破损图片。
- 图片不存在、内容不是图片、请求超时或来源网站限制外链访问时,都可能验证失败。
- 每次导入计一次;同一张已导入图片随后替换多个元素不会重复计数。
选择保持原框,或让页面跟随新图尺寸
“设置 → 更改图片”决定每次替换的默认行为。快速制作版式预览时可保留原有图片框;需要观察新素材真实尺寸对布局的影响时,则让页面使用新图自己的尺寸。
- “保持原尺寸并裁剪填满”保留原盒子,并按 cover 方式填充和裁剪。
- “使用新图自己的尺寸”采用替换图片的自身尺寸,页面可能因此重新排版。
- 同一套替换流程适用于普通图片和能够选中的背景图。
拖动八个手柄,同时保持干净的撤回历史
图片成功替换后,目标元素立即获得四个角点和四条边上的调整大小手柄。页面滚动或元素尺寸变化时,覆盖层会继续贴合。
- 拖动角点默认保持宽高比;拖动边线默认只改变一个方向。
- 按住 Alt 可反转当前规则;拖动过程中按 Esc 会取消并恢复开始时的尺寸。
- 一次完成的拖拽只生成一步撤回;取消或尺寸未变化的拖拽不会进入历史。
所有编辑都在当前浏览器标签页中完成,不上传网页内容。刷新页面即可恢复原状。
如何替换网页图片
- 1步骤 1
选择“更改图片”
在目标网页打开 Edit Page,并从控制面板选择图片工具。
- 2步骤 2
选择目标和新图片
点击网页图片,然后上传本地文件或粘贴图片直链。
- 3步骤 3
对比最终效果
检查构图和裁切,需要时撤销;刷新页面即可全部恢复。
常见图片预览场景
营销素材确认
把新 Banner 或活动视觉直接放入落地页中审核。
电商陈列
对比不同商品图,并检查裁切在商品列表中的表现。
作品集与方案演示
无需重建页面,也能制作可信的前后对比效果。
图片替换提示
- 尽量选择与原图宽高比接近的图片,预览效果会更真实。
- 部分视觉是 CSS 背景而非普通图片元素,可能无法直接选中。
- 浏览器受保护页面不允许插件运行。
替换网页图片常见问题
可以上传电脑里的图片吗?
可以,也可以粘贴已经在线的图片 URL。
网站管理员会看到我的替换吗?
不会。预览只存在于当前标签页,不会更新网站服务器。
为什么新图片被裁切了?
“保持原尺寸并裁剪填满”会保留原有盒子并用新图填满。若希望页面采用新图自己的尺寸,请在设置中选择“使用新图自己的尺寸”。
替换后可以直接调整图片大小吗?
可以。替换后的图片会出现八个调整大小手柄。拖动角点默认保持宽高比,拖动边线默认只改变一个方向,按住 Alt 可反转当前规则。
调整大小会再次消耗免费次数吗?
不会。免费额度在导入本地图片或图片 URL 时计数;调整大小、撤回和重做都不消耗额度。
准备好直接修改网页了吗?
安装插件,在任意普通网页上开始编辑。