所在位置：
首页 >
营销资讯 >
网站运营 > 网页制作图片素材保存技巧：图片助手(ImageAssistant)
网页制作图片素材保存技巧：图片助手(ImageAssistant)
时间：2023-07-26 12:54:02 | 来源：网站运营
时间：2023-07-26 12:54:02 来源：网站运营
网页制作图片素材保存技巧：图片助手(ImageAssistant)：搜集图片，再一张张保存图片再命名，会给网页制作带来很不好的体验和效率。
所以，为了摆脱这种模式，我找到了Chrome下的一款图片保存插件：
图片助手(ImageAssistant)Chrome应用商店:
https://chrome.google.com/webstore/detail/dbjbempljhcmhlfpfacalomonjpalpko下载安装好了，就可以开始制作网页了
展示一个网页的制作，用这个ImageAssistant插件辅助开发。
这是一个简单有效的图片素材保存替换教程。
希望可以帮到你的开发，或带给你灵感。
第一步，打开chrome，寻找自己需要的图片，比如我要一张banner图片，右键复制它的图片地址。
PS：这个图片地址是指在这个
http://www.bnu.edu.cn服务器上的地址
图片地址：
https://www.bnu.edu.cn/images/content/2020-05/20200521085839240146.jpg
第二步，将复制的图片地址粘贴到网页的<img>标签Src属性中。
重复上述两步，让你项目的所有网页上<img>的src属性全都变成所谓的外链为止：
图片地址：
https://www.bnu.edu.cn/images/content/2020-05/20200521085839240146.jpg
第三步，点击Chrome网页插件ImageAssistant的提取本页图片，
所有引用的图片都在下载列表上，点击下载全部即可完成图片保存到本地。
默认的保存规则是，文件名是ix00000xx的，
文件位置：下载/ImageAssistant/当前时间>网页名。
图片保存位置在项目文件中新建一个文件夹images，并打开它。
新建一个Finder文件窗口，之后再将以网页名命名的文件夹拖到images文件夹中。
此时，若图片已经全部下载到本地，则项目中已经存在所有需要的图片。
第四步，更换项目的所有HTML文件中<img>的src属性，首先针对所有HTML中存在一样的地址，如Logo图片、底部图片。
使用IDE（集成开发环境）的软件替换，以Vscode为例，首页的logo图片文件为例。
点击全部替换按钮，即可将首页的logo图片地址全部替换成本地路径。
全部替换按钮最麻烦的是针对于不同的数据字段，先要剔除外链。
目前想到最好的方法是，找一个支持正则表达式的编辑器，编写正则表达式来将所有的http开头的url外链删除，如此，外链已成功清除。
接下来就是在已经剔除的src属性中补充本地图片地址就好，这个过程最好是分列两个窗口，一个是网页文件，一个是文件资源管理器，确保本地图片地址正确。
这样相比，平常的图片搜寻是不是要麻烦一些呢
在线咨询
