Fixing issues of image error when building dev

[windhamwong]

Fixing issues on packing images into build #webpack #base64 #loader

The problem now is that:
When you do grunt dev, all the images are double encoded with base64 and saved as files. By default, HTML do not load up data base64 images in this way, so I removed the loader part and images are now converted into data URI base64 inline in the HTML.

I didn't try on build prod, but I assume it has the same issue. I can see that the Webpack part is still under development, this should temp fix for people who want to use the tool at the moment.

[windhamwong]

Double confirmed this is compilable under Windows 7 grunt-cli v1.2.0 and npm 4.0.3

[n1474335]

Hi @windhamwong, could you explain what the problem is that you're trying to fix?

The webpack config is designed to support three different types of build:

1. The dev build concatenates all JS into a single scripts.js file and references external images.
2. The prod build concatenates all JS into a single scripts.js file and compresses it. It also references external image files.
3. The inline build inlines the scripts.js file and also converts the external images to inlined base64 data URIs.

Across all these builds, any images referenced in third party code (libraries) are inlined, so as to solve referencing issues.

What are you hoping to achieve with this pull request?

[windhamwong]

Thanks for the response and the explanation.
Sounds like dev/prod/inline has different behaviours on building the project. I was doing build dev and I can see the image files in images/ are in base64 with modules.export thing inside the content. It cannot be loaded up in the index because they are not images. I will go back and review the code I used later next week.

[n1474335]

That's not the behaviour I'm seeing (and it isn't how it should be working). I'd try updating your node and npm versions and reinstalling.

I'll close this for now, but if you keep having problems, raise an issue with all the details of how to replicate it and we'll see what we can do to fix it.

[windhamwong]

Using command grunt dev
The file save-16x16.png that is copied to build/dev/images/
module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABn0lEQVR4XpWTMasTQRDHf7N3efcwKqgh8CJEAg9sBEGEB6KV4gewC9g9RD+DYmelnSh+AdFCTGHtEwsVEYvXqkUgFjYm3R1JbmdHsoQjCQrnD4b/sDvzZ2ZhZe/Oy9eqeoMIBrCZ/+vOOfdCLt56Xt7fv5ruvX8MIWAhENWirpxplWPG2+v3ePLqEymABuP3s4eYKnUJ1+5GTQFRVXYePI3OdSm9VgZ4NU7evM3/oG++rRoEVJXRaEQder3e2gSiGkiSJF7URX2oDFBVAIbDIXXodrtrE1Au3epPwMYKPrD/6APbky8kxU/+igAI8+0z5M1z7J4+vvqICvMiNl+5fIksy2g0GlU455jNZuR5zsHBO/KtXbxvrq6ghBBwLqHVajEYDADo9/tMp1OKolhoDMTFWr9cwQES1OKhCDSbTZYwHo+ZTCYLrXIzw4JSlpUBzEtP6sAgFi3ZbI5qECcovQfAOZHPhz9+TXdOHQGzWNTpdGi325vNMTDjxLGtaoLFbzwqwsfM+bPn06+ZSIphYEQF1v6IYBz6C7lKJqr2/Q9KnAkBTHYbVAAAAABJRU5ErkJggg=="

[n1474335]

This is what I get:

$ grunt dev
Running "clean:dev" (clean) task
>> 4 paths cleaned.

Running "webpack:webDev" (webpack) task
                       Asset       Size  Chunks                    Chunk Names
images/open_yellow-16x16.png  474 bytes          [emitted]
       images/help-22x22.png    1.29 kB          [emitted]
        images/bug-16x16.png  773 bytes          [emitted]
      images/clean-16x16.png  702 bytes          [emitted]
  images/cook_male-32x32.png    1.64 kB          [emitted]
images/cyberchef-128x128.png    7.54 kB          [emitted]
   images/download-24x24.png  905 bytes          [emitted]
      images/erase-16x16.png  680 bytes          [emitted]
  images/favourite-16x16.png  491 bytes          [emitted]
  images/favourite-24x24.png    1.23 kB          [emitted]
          images/fork_me.png    7.66 kB          [emitted]
       images/help-16x16.png  843 bytes          [emitted]
     images/layout-16x16.png  334 bytes          [emitted]
   images/maximise-16x16.png  235 bytes          [emitted]
   images/settings-22x22.png    1.05 kB          [emitted]
images/open_yellow-24x24.png  719 bytes          [emitted]
    images/recycle-16x16.png  585 bytes          [emitted]
       images/save-16x16.png  472 bytes          [emitted]
       images/save-22x22.png  695 bytes          [emitted]
    images/save_as-16x16.png  642 bytes          [emitted]
     images/speech-16x16.png  360 bytes          [emitted]
       images/step-16x16.png  575 bytes          [emitted]
     images/switch-16x16.png  472 bytes          [emitted]
 images/thumb_down-16x16.png  769 bytes          [emitted]
   images/thumb_up-16x16.png  717 bytes          [emitted]
       images/undo-16x16.png  553 bytes          [emitted]
                  scripts.js    6.01 MB       0  [emitted]  [big]  main
                  styles.css     129 kB       0  [emitted]         main
                  index.html    34.4 kB          [emitted]
^C
$ xxd build/dev/images/save-16x16.png
00000000: 8950 4e47 0d0a 1a0a 0000 000d 4948 4452  .PNG........IHDR
00000010: 0000 0010 0000 0010 0806 0000 001f f3ff  ................
00000020: 6100 0001 9f49 4441 5478 5e95 9331 ab13  a....IDATx^..1..
00000030: 4110 c77f b377 79f7 302a a821 f022 4402  A....wy.0*.!."D.
00000040: 0f6c 0441 8407 a295 e207 b00b d83d 443f  .l.A.........=D?
00000050: 8362 67a5 9d28 7e01 d142 4c61 ed13 0b15  .bg..(~..BLa....
00000060: 118b d7aa 4520 1636 26dd 1d49 6e67 47b2  ....E .6&..IngG.
00000070: 8423 090a e70f 86ff b03b f367 6661 65ef  .#.......;.gfae.
00000080: cecb d7aa 7a83 0806 b099 ffeb ce39 f742  ....z........9.B
00000090: 2ede 7a5e dedf bf9a eebd 7f0c 2160 2110  ..z^........!`!.
000000a0: d5a2 ae9c 6995 63c6 dbeb f778 f2ea 1329  ....i.c....x...)
000000b0: 8006 e3f7 b387 982a 7509 d7ee 464d 0151  .......*u...FM.Q
000000c0: 5576 1e3c 8dce 7529 bd56 0678 354e debc  Uv.<..u).V.x5N..
000000d0: cdff a06f bead 1a04 5495 d168 441d 7abd  ...o....T..hD.z.
000000e0: deda 04a2 1a48 9224 5ed4 457d a80c 5055  .....H.$^.E}..PU
000000f0: 0086 c321 75e8 76bb 6b13 502e ddea 4fc0  ...!u.v.k.P...O.
00000100: c60a 3eb0 ffe8 03db 932f 24c5 4ffe 8a00  ..>....../$.O...
00000110: 08f3 ed33 e4cd 73ec 9e3e befa 880a f322  ...3..s..>....."
00000120: 365f b97c 892c cb68 341a 5538 e798 cd66  6_.|.,.h4.U8...f
00000130: e479 cec1 c13b f2ad 5dbc 6fae aea0 8410  .y...;..].o.....
00000140: 702e a1d5 6a31 180c 00e8 f7fb 4ca7 538a  p...j1......L.S.
00000150: a258 680c c4c5 5abf 5cc1 0112 d4e2 a108  .Xh...Z.\.......
00000160: 349b 4d96 301e 8f99 4c26 0bad 7233 c382  4.M.0...L&..r3..
00000170: 5296 9501 cc4b 4fea c020 162d d96c 8e6a  R....KO.. .-.l.j
00000180: 1027 28bd 07c0 3991 cf87 3f7e 4d77 4e1d  .'(...9...?~MwN.
00000190: 01b3 58d4 e974 68b7 db9b cd31 30e3 c4b1  ..X..th....10...
000001a0: ad6a 82c5 6f3c 2ac2 c7cc f9b3 e7d3 af99  .j..o<*.........
000001b0: 488a 6160 4405 d6fe 8860 1cfa 0bb9 4a26  H.a`D....`....J&
000001c0: aaf6 fd0f 4a9c 0901 4c76 1b54 0000 0000  ....J...Lv.T....
000001d0: 4945 4e44 ae42 6082                      IEND.B`.