公司业务类似于电商, 因此有很多纯图片展示的商品详情页, 类似淘宝店商品页面下的多个图片组成的商品详情页,

页面很简单, 就是一大串img标签, 但是每次做详情页都要配合emmet一顿操作( 如下图 )

(大致操作就是, shift+右键复制文件路径, 然后编辑器里截取文件名, 再配合emmet导成img标签)

偶尔做一次还好, 经常做这类详情页就感觉很麻烦了.

于是乎写了个js脚本一键批量导出为img标签,

git repo地址: https://github.com/Skura23/path-to-img

git demo地址: https://skura23.github.io/path-to-img/

使用很简单, 前缀栏输入公共路径部分, 路径栏输入在本地选中多个图片 shift+右键 选择 复制为路径 获得的图片绝对路径

js比较简单, 但是帮我节省了很多时间, 分享出来, 有需要的童鞋可以使用

本文地址:http://www.cnblogs.com/skura23/p/8617322.html

js脚本 将本地图片路径转换为html的更多相关文章

  1. Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案

    Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成  ...

  2. 如何在vue中使用动态使用本地图片路径

    不知道各位小伙伴有没有在开发遇到一个问题,就是在线上的项目使用后台返回本地图片路径,然后加载不上的情况呢? 我的解决方法就是:先在项目的data下定义好这样一个数组用于存放需要加载的路径 [ {nam ...

  3. js上传本地图片遇到的问题

    1.改变页面文件上传默认的样式 <input type="text" size="20" id="upfile" style=&quo ...

  4. 一段上传图片预览JS脚本,Input file图片预览的实现

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...

  5. js小工具---本地图片转换为base64编码数据

    今天用jmeter对图片对比进行性能测试,post请求为json请求,图片为Base64编码后的图片数据.所以需要将一张本地图片生成base64编码,找到一个js小工具,记录在这儿便于以后复用. 效果 ...

  6. 利用js加载本地图片预览功能

    直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safa ...

  7. 读取sd卡下图片,由图片路径转换为bitmap

    public Bitmap convertToBitmap(String path, int w, int h) {             BitmapFactory.Options opts = ...

  8. 上传图片预览JS脚本 Input file图片预览的实现示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js利用正则替换图片路径问题

    /* * 需求:给图片的src地址前面增加为assets * * 1. 将需要匹配的内容原封不动的写入正则表达式 * 2. 将改变的内容替换为.*? * 3. 将.*?添加(),目的是为了能够将src ...

随机推荐

  1. Tarjan学习笔记

    \(Tarjan\)是个很神奇的算法. 给一张有向图,将其分解成强连通分量们. 强连通分量的定义:一个点集,使得里面的点两两可以互相到达,并且再加上另一个点都无法满足强连通性. \(Tarjan\)的 ...

  2. QT QListWidget 简单的操作

    以下是简单的 listWidget 的方法的功能 listWidget = QListWidget() #实例化一个(item base)的列表 listWidget.addItem('dd') #添 ...

  3. Git使用—第二讲

    前面我们学习了Git最基本的用法,包括安装Git.创建代码仓库,以及提交本地代码.下面我们将学习Git更多的使用技巧,在开始之前,我们先给一个项目创建代码仓库,这里选择在ProviderTest项目中 ...

  4. java 迭代器遍历List Set Map

    Iterator接口: 所有实现了Collection接口的容器类都有一个iterator方法用以返回一个实现Iterator接口的对象 Iterator对象称作为迭代器,用以方便的对容器内元素的遍历 ...

  5. Saltstack学习之二:target与模块方法的运行

    对象的管理 saltstack系统中我们的管理对象叫做target,在master上我们可以采用不同的target去管理不同的minion,这些target都是通过去管理和匹配minion的id来做的 ...

  6. 阅读Cortex-A53 Technical Reference Manual笔记

    1. 前言 一颗芯片最主要的就是CPU核了,处理CPU Core之外,还存在很多其他IP,包括Graphical.Multimedia.Memory Controller.USB Controller ...

  7. BZOJ3252 攻略 贪心、长链剖分

    传送门 给树竟直接给父子关系!!!真良心 首先一个贪心策略:每一次选择的链一定是所有链中权值最大的.这应该比较显然 那么我们接下来考虑如何维护这个贪心.我们可以使用长链剖分进行维护,对权值进行长链剖分 ...

  8. ionic访问odoo 11接口

    在架设完毕odoo 11的网站之后,第一次面临手机app该如何访问后台网站的问题,是不是模式类似asp.net mvc 那样的模式,或者还存在其他的访问方法,带着这个疑问与困惑,开始的我的研究学习之路 ...

  9. bat基础知识

    1.打日志:使用重定向 eg:call test.bat>log/test.log 2.不关闭cmd窗口:使用pause eg: 结果: ps:注意,在自动化运维的时候,比如创建自动发版的脚本的 ...

  10. 关于LCA

    LCA:最近公共祖先 指在有根树中,找出某两个结点u和v最近的公共祖先 如图,5,7的最近公共祖先就是3 接下来,我们来了解如何求解LCA No.1 暴力 首先想到的肯定是暴力,我们搜索,从两个节点一 ...