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

页面很简单, 就是一大串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. MongoDB可视化工具--Robo 3T 使用教程

    MongoDB可视化工具--Robo 3T 使用教程 1. 到官网下载Robo 3T,网址如: https://robomongo.org/download. 2. 下载安装成功后,打开后点击左上角的 ...

  2. Android学习之基础知识十一 —运用手机多媒体

    一.使用通知(Notification) 通知(Notification)是Android系统中比较有特色的一个功能,当某个应用程序希望向用户发出一些提示信息,而该应用程序又不在前台运行时,就可以借助 ...

  3. Omi框架学习之旅 - 通过omi-id来实现组件通讯 及原理说明

    这个demo是通过omi-id来获取子类的实例,然后更改data属性,之后updata一下就好了. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello ...

  4. virtualbox - 2台虚拟机之间通过ssh互访

    virtualbox 5.2.12 一台虚拟机是Debian 9,另一台是Ubuntu 18.04. 注意: 2台虚拟机系统里要安装ssh ! sudo apt install ssh 然后在virt ...

  5. 【第196期】Drupal7 Features模块与 Drupal8 Configuration Management 模块对比

    Drupal 8 最好和最受欢迎的部分之一是新的配置管理系统. 该系统使开发人员很容易将配置导出到代码中.在此之前,开发人员不得不依赖于由Features.Strongarm.UUID.Feature ...

  6. Java HTML to PDF 支持SVG

    尝试一 (现用框架的基础上改动,影响最小化) 最早使用的框架 Xhtmlrenderer,需要把HTML转换成XHTML,引入第二个框架Tidy,Tidy与2010年停止更新,github上的项目也停 ...

  7. python语言程序设计9

    1, 数字转换形式中有很多东西都不会,但是总不能放仍不管把? 总结点东西吧,比如 print()中增加end=""参数表示输入后不增加换行,多个print可以连续输出. 2, 我还 ...

  8. win8系统本地服务网络受限cpu占用率过高解决方案

    今天更新软件时突然就打不开软件了,接着cpu就飙升. 打开任务管理器看到是“本地服务网络受限”这么一个东西占用的cpu最高. 在网上找到的解决方案无效的: 1.关闭家庭组(服务里的homegroup· ...

  9. taro之React Native 端开发研究

    初步结论:如果想把 React Native 集成到现有的原生项目中,不能使用taro的React Native 端开发功能(目前来说不能实现,以后再观察).   RN开发有2种模式: 1.一是原生A ...

  10. Wannafly挑战赛25 B.面积并

    链接 [https://www.nowcoder.com/acm/contest/197/B] 分析 特殊优先考虑 首先考虑r>=l这种情况就是圆的面积了 第二就是r<=内切圆的半径,这个 ...