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

页面很简单, 就是一大串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 111C】Petya and Spiders

    Codeforces 111 C 题意:给\(n\times m\)的网格,每个点上有一个蜘蛛,每个蜘蛛可以向上.下.左.右走一步或者不动,问最多能存在多少没有蜘蛛的点. 思路1: 首先因为\(n\) ...

  2. 常用gcc选项

    <Linux GCC常用命令> Makefile有三个非常有用的变量.分别是$@,$^,$<代表的意义分别是: $@--目标文件,$^--所有的依赖文件,$<--第一个依赖文件 ...

  3. Maven学习笔记-03-Eclipse和Maven集成

    本文使用 Eclipse 集成 Maven,并创一个基于 maven的web工程 一 环境版本信息 本文使用的版本信息如下: Eclipse Version: Mars.1 Release (4.5. ...

  4. Error creating bean with name 'enableRedisKeyspaceNotificationsInitializer' defined in class path resource

    我们在SpringBoot中用Jedis来访问Redis,其中Redis是采用集群(单机没有本篇文章的问题)的方式,在启用Redis的时候碰到如上问题. 错误的核心信息如下: Error creati ...

  5. 大数据处理过程核心技术ETL详细介绍

    架构挑战 1.对现有数据库管理技术的挑战. 2.经典数据库技术并没有考虑数据的多类别(variety).SQL(结构化数据查询语言),在设计的一开始是没有考虑到非结构化数据的存储问题. 3.实时性技术 ...

  6. linux 与 windows 挖门罗币总结

    比特币之前一直很火,初次了解的时候才2000RMB一枚..看不懂哇,错失良机...当然了,看得懂也不买不起..当时还是穷学生. 最近又一直看到黑客利用linux漏洞挖门罗币获利的新闻,决定好生研究一下 ...

  7. dp方法论——由矩阵相乘问题学习dp解题思路

    前篇戳:dp入门——由分杆问题认识动态规划 导语 刷过一些算法题,就会十分珍惜“方法论”这种东西.Leetcode上只有题目.讨论和答案,没有方法论.往往答案看起来十分切中要害,但是从看题目到得到思路 ...

  8. RabbitMQ --- Hello Mr.Tua

    目录 RabbitMQ --- Work Queues(工作队列) RabbitMQ --- Publish/Subscribe(发布/订阅) RabbitMQ --- Routing(路由) 安装环 ...

  9. Python3出现"No module named 'MySQLdb'"问题-以及使用PyMySQL连接数据库

    Python3 与 Django 连接数据库,出现了报错:Error loading MySQLdb module: No module named 'MySQLdb'.原因如下:在 python2 ...

  10. Linux下monit进程管理操作梳理

    Monit对运维人员来说可谓神器,它是一款功能非常丰富的进程.文件.目录和设备的监测工具,用于Unix平台.它可以自动修复那些已经停止运作的程序,特使适合处理那些由于多种原因导致的软件错误.Monit ...