whxaxes/gulp-tobase64

It is a bug?

Closed this issue · 4 comments

spivet commented

my code:

gulp.task('img64', function() {
  return gulp.src('dist/html/*.html')
    .pipe(img64({
      limit: '8kb'
    }))
    .pipe(gulp.dest(paths.pug.dest))
})

gulp.js:

4.0

result:
The src attribute of all img are the same, and the path of link is also broken

whxaxes commented

u should use maxsize instead of limit

.eg

gulp.task('img64', function() {
  return gulp.src('dist/html/*.html')
    .pipe(img64({
      maxsize: 8
    }))
    .pipe(gulp.dest(paths.pug.dest))
})
spivet commented

sorry, I've pasted wrong code, my code should be follow:

gulp.task('img64', function() {
  return gulp.src('dist/html/*.html')
    .pipe(base64({
      maxsize: 8
    }))
    .pipe(gulp.dest(paths.pug.dest))
})

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,user-scalable=no">
  <title>微测评</title>
  <link rel="stylesheet" href="../css/main-23096f91a6.css">
  <script src="../js/lib/TouchSlide.min.js"></script>
</head>

<body>
  <div class="main">
    <div class="content">
      <div class="wraper f-mb20">
        <a class="report-link" href="report.html"><img src="../img/report.png" alt="点击查看成绩报告"></a>
      </div>
      <div class="wraper f-mb20">
        <a href="#"><img src="../img/shipin.png" alt="所有视频"></a>
        <div class="home__nav-btns">
          <a class="home__nav-btn" href=""><img src="../img/shuxue.png" alt="数学"><span>数学</span></a>
          <a class="home__nav-btn" href=""><img src="../img/yingyu.png" alt="英语"><span>英语</span></a>
          <a class="home__nav-btn" href=""><img src="../img/wuli.png" alt="物理"><span>物理</span></a>
          <a class="home__nav-btn" href=""><img src="../img/huaxue.png" alt="化学"><span>化学</span></a>
        </div>
      </div>
      <div class="wraper f-mb20">
        <a href="learner-report.html"><img src="../img/xxz.png" alt="学习者特征评价"></a>
      </div>
    </div>
  </div>
  <div class="tabbar">
    <a class="tabbar-btn" href="home.html"><img src="../img/tab-home.png" alt="首页"><span>首页</span></a>
    <a class="tabbar-btn" href="report.html"><img src="../img/tab-report.png" alt="报告"><span>报告</span></a>
    <a class="tabbar-btn" href="my.html"><img src="../img/tab-my.png" alt="我"><span>我</span></a>
  </div>
</body>

</html>

result:

<!DOCTYPE html>
<html>
    ......
     <a class="report-link" href="report.html"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAABWVBMVEUAAAD///9mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmYPC4dPAAAAcnRSTlMAAAECBAUGBwoLDA4PEBQVFhocHh8gISIjJCcqLzEyMzU3ODk9PkRHSU1QUVRYWWBlZmdobHB1dnd+gIGHiIuMjZKWl5iZo6WmqKqrsLi/wMHDxMXIy8zNz9DU2tvc3d/g4uTm5+rs8fL19/j5+vv8/f7QQyRhAAACU0lEQVRIx7XVWVsaMRiG4QS3gmAVRa0r7jto64IoqFjbgituqC2KqCgIU33+/0EPtFqRGWaMfQ9ncl8zSb58EVKUTtN07CQL2ZPYdJPOEClKYtvw1j1Pud8atpnH7TsUZafdLJ66BUgEhzwul2comAC4nTKFbcsA653PTzrXAZZtJnAYSA++fDaYBsLlsR84qC8eV38A+Mvh1hwcOl/Pz3kIudYyeBOuGkrtS8MVbBrjXmC8dEmMA72GOAbbOvUktiFmhGvzMKKHRyBfa4BHIVOphyszMGqAQxAVuolCyABvQEAfB2DDAO+BTx/7YM8AHxfN6mVG4fh/fVlpzkqrrbTPShWmVNtqp0rpPKt1EqUeptY91fq20o2heFep3ZJq9/PTH9iM3pbBxnl/XNXlX4zuJjMagJZJ7kYX/V1VZnB3MJ6nRPLxYLcxdgdTGCQVdOviT99+PwzK7a8GfP1tnjqXq87T1u8LrO7nHt4UvjaWxI6lAsBdfLajRBur7JiN3wEUluyvcc8pwM+ZOv3V/TjzC+C0pxj7C0ByosJ4cyomkkDB/xLPAdpCTfm9rVnQgLl/8SRw2WeuNPougclnPKBBstFsYTUmQRv4ix1nkHabL0t3Gs4cj3gFNK+VovZqsPKAmwswb+1IzEOhWUghRQRS1dZwdQoiQgppv3lcPCuZhBu7FHIMru1W8YdrGJNCrsEP643gO6xJIY/gi3X8GY6kkFnwWsdeyEohgRbruAWQQl5AxGnVOiNwIYUM88aEpZCOxNtswiGFFPbQuXV6HrIL+Qd08DjKZxegVgAAAABJRU5ErkJggg==" alt="点击查看成绩报告"></a>
      </div>
      <div class="wraper f-mb20">
        <a href="#"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAABWVBMVEUAAAD///9mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmYPC4dPAAAAcnRSTlMAAAECBAUGBwoLDA4PEBQVFhocHh8gISIjJCcqLzEyMzU3ODk9PkRHSU1QUVRYWWBlZmdobHB1dnd+gIGHiIuMjZKWl5iZo6WmqKqrsLi/wMHDxMXIy8zNz9DU2tvc3d/g4uTm5+rs8fL19/j5+vv8/f7QQyRhAAACU0lEQVRIx7XVWVsaMRiG4QS3gmAVRa0r7jto64IoqFjbgituqC2KqCgIU33+/0EPtFqRGWaMfQ9ncl8zSb58EVKUTtN07CQL2ZPYdJPOEClKYtvw1j1Pud8atpnH7TsUZafdLJ66BUgEhzwul2comAC4nTKFbcsA653PTzrXAZZtJnAYSA++fDaYBsLlsR84qC8eV38A+Mvh1hwcOl/Pz3kIudYyeBOuGkrtS8MVbBrjXmC8dEmMA72GOAbbOvUktiFmhGvzMKKHRyBfa4BHIVOphyszMGqAQxAVuolCyABvQEAfB2DDAO+BTx/7YM8AHxfN6mVG4fh/fVlpzkqrrbTPShWmVNtqp0rpPKt1EqUeptY91fq20o2heFep3ZJq9/PTH9iM3pbBxnl/XNXlX4zuJjMagJZJ7kYX/V1VZnB3MJ6nRPLxYLcxdgdTGCQVdOviT99+PwzK7a8GfP1tnjqXq87T1u8LrO7nHt4UvjaWxI6lAsBdfLajRBur7JiN3wEUluyvcc8pwM+ZOv3V/TjzC+C0pxj7C0ByosJ4cyomkkDB/xLPAdpCTfm9rVnQgLl/8SRw2WeuNPougclnPKBBstFsYTUmQRv4ix1nkHabL0t3Gs4cj3gFNK+VovZqsPKAmwswb+1IzEOhWUghRQRS1dZwdQoiQgppv3lcPCuZhBu7FHIMru1W8YdrGJNCrsEP643gO6xJIY/gi3X8GY6kkFnwWsdeyEohgRbruAWQQl5AxGnVOiNwIYUM88aEpZCOxNtswiGFFPbQuXV6HrIL+Qd08DjKZxegVgAAAABJRU5ErkJggg==" alt="所有视频"></a>
    .....

like the code above, all the src attribute of all img are the same

whxaxes commented

it seems like a bug, try 1.1.2

spivet commented

Thank you so much! The problem is solved perfectly!