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

页面很简单, 就是一大串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. 20175310 《Java程序设计》第5周学习总结

    20175310 <Java程序设计>第5周学习总结 本周博客: <20175310 迭代和JDB - 20175310xcy - 博客园> https://www.cnblo ...

  2. PAT A1141 PAT Ranking of Institutions (25 分)——排序,结构体初始化

    After each PAT, the PAT Center will announce the ranking of institutions based on their students' pe ...

  3. PAT A1015 Reversible Primes (20 分)——进制转换,质数

    A reversible prime in any number system is a prime whose "reverse" in that number system i ...

  4. Android 让图片等比例缩放的三种方法

    方法一:客户端等比例 前提条件:服务器端需要返回原始图片的“宽和高”或者“宽高缩放比例”,客户端要显示的图片的宽或者高只要其一是固定的(例如:高度为200,宽度未知,或者高度为400宽度未知) 在这种 ...

  5. SkylineGlobe API 如何以图层的方式导入MPT地形

    测试环境:TerraExplorer Pro 6.6; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  6. Unity报错 GameObject is already being activated or deactivated

    unity 在OnDisable 方法里设置父节点会报这个错. void OnDisable() { // transform.parent = oldParent; transform.SetPar ...

  7. python 知识

    def action_cancel_sale_order(self,cr,uid,ids,context=None): self.message_post(cr, uid, ids, body=u&q ...

  8. RDLC报表显示存储于数据库的图片

    图片以二进制存储于数据库表中.在显示RDLC报表时,把图片呈现出来. 好吧. 把存储过程写好: CREATE PROCEDURE [dbo].[usp_File_Select] AS SELECT [ ...

  9. Nancy异步用法

    个人笔记,记录Nancy异步用法 基类,所有请求都将首先执行该类,并执行Before事件 namespace CxyAdvert.Base { public class BaseNancyModel ...

  10. 闭包----你所不知道的JavaScript系列(4)

    一.闭包是什么? · 闭包就是可以使得函数外部的对象能够获取函数内部的信息. · 闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. · 闭包就 ...