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

页面很简单, 就是一大串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. 【Codeforces 464D】World of Darkraft - 2

    Codeforces 464 D 首先我们知道这K个装备是互不干扰的,就是说如果一个装备升级了或者卖掉了,不会对其它装备的挣到的钱产生任何影响.所以我们就考虑单独处理某一个装备挣到的钱. 那么就设\( ...

  2. 【Codeforces 17E】Palisection

    Codeforces 17 E 题意:给一个串,求其中回文子串交叉的对数. 思路1:用哈希解决.首先求出每个点左右最长的回文串(要分奇数长度和偶数长度),然后记录经过每个点的回文串的个数,以及它们是在 ...

  3. ingress rewrite

    kubernetes.io/ingress.class: nginx nginx.ingress.kubernetes.io/rewrite-target: http://www.oneway.cn ...

  4. CF932F Escape Through Leaf 斜率优化、启发式合并

    传送门 \(DP\) 设\(f_i\)表示第\(i\)个节点的答案,\(S_i\)表示\(i\)的子节点集合,那么转移方程为\(f_i = \min\limits_{j \in S_i} \{a_i ...

  5. CF1097F Alex and a TV Show 莫比乌斯反演、bitset

    传送门 发现自己对mobius反演的理解比较浅显-- 首先我们只需要维护每一个数的出现次数\(\mod 2\)的值,那么实际上我们只需要使用\(bitset\)进行维护,每一次加入一个数将其对应次数异 ...

  6. Luogu4652 CEOI2017 One-Way Streets 树上差分

    传送门 题意:给出$N$个点.$M$条无向边的图,现在你需要给它定向,并满足$Q$个条件:每个条件形如$(x_i,y_i)$,表示定向之后需要存在路径从$x_i$走向$y_i$.问每条边是否都有唯一定 ...

  7. npm install xxx --save-dev 与npm install xxx --save 的区别

    正常情况下: 当你为你的模块安装一个依赖模块时 1.你得先安装他们(在模块根目录下npm install module-name) 2.连同版本号手动将他们添加到模块配置文件package.json中 ...

  8. Codeforces Round #481 (Div. 3)

    我实在是因为无聊至极来写Div3题解 感觉我主要的作用也就是翻译一下题目 第一次线上打CF的比赛,手速很重要. 这次由于所有题目都是1A,所以罚时还可以. 下面开始讲题 A.Remove Duplic ...

  9. pycharm2019注册码一键实时获取,永久有效!

    pycharm2019专业版激活码 56ZS5PQ1RF-eyJsaWNlbnNlSWQiOiI1NlpTNVBRMVJGIiwibGljZW5zZWVOYW1lIjoi5q2j54mI5o6I5p2 ...

  10. 收藏pdf 链接

    python 入门: https://files.cnblogs.com/files/minsons/python%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E6%B7% ...