data-uri doesn't work

[mdreizin]

@jhnns, @sokra one again, it doesn't work, background-image: data-uri('../img/privateinvestocat.jpg');

lessc compiles correctly, but less-loader outputs corrupted image.

Here is data-uri.less:

.data-uri {
  background-image: data-uri('../img/privateinvestocat.jpg');
}

Where ../img/privateinvestocat.jpg is https://octodex.github.com/images/privateinvestocat.jpg

lessc --no-ie-compat test/less/data-uri.less test/less/data-uri.css outputs:

.data-uri {
  background-image: url("data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZ...//Z");
}

but less-loader?ieCompat=false outputs:

.data-uri {
  background-image: url("data:image/jpeg;base64,77+977+977+977+9ABhFeGlmAABJSSoACAAAAAAAAAAAAAAA77+977+9ABFEdWNreQABAAQAAABkAADvv73vv70DMWh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwMTQgNzkuMTU2Nzk3LCAyMDE0LzA4LzIwLTA5OjUzOjAyICAgICAgICvVJaSiPvv70L77+9dGjvv73vv73vv70k77+977+977+977+977+9biTvv73vv70S77+9RF0x77+9dO+/ve+/vdu7P++/vXLvv713Ee+/vSbvv73vv71/VWQbf2nvv70/Bxrvv73vv70ix4de77+9Je+/ve+/vTdz77+9aO+/ve+/vXHvv70uPR0TLe+/ve+/vULvv71Jbjbvv71NIceeW2zvv73jiZRy77+9c3Lvv73vv73vv70h77+977+9zY3vv73vv73vv70PU++/ve+/vWvvv73vv73vv71tCe+/ve+/vTNTRGbvv73elTrvv71w77+9Zu+/ve+/vQjvv71s77+977+977+9LUfvv73vv73vv71F77+9ce+/ve+/vWFnN17vv71d77+93rrvv71l77+9G++/vUU1H++/vXTvv73Gv++/ve+/vUFz77+9JQ3vv73vv70177+9RO+/ve+/ve+/ve+/vVHvv73vv73vv70477+977+977+9Uh7vv70cSe+/vV3vv71s77+9JXtNFjBbV++/ve+/vQXvv71e77+9J++/vQzvv73vv70gUzvvv70A77+9YnHvv73vv73vv70W77+9Rz7fk++/vW4r77+977+9Su+/vSrvv73vv70ReO+/ve+/ve+/ve+/ve+/AAAAPvv73vv70=");
}

[sokra]

decoded

lessc: ff d8 ff e1 00 18 45 78 ...
less-loader: ef bf bd ef bf bd ef bf bd ef bf bd 00 18 45 78 ...

---

@mdreizin you can use url() and the url-loader instead of data-uri().

[mdreizin]

@sokra Thanks for the response. I know about url-loader and I'm currently using this approach as workaround.

This is strange behaviour after migration from 0.7.7 to 2.0.0 :(

[jhnns]

Agreed, the image should not be corrupted, I can take a look.

But to be honest, using the url() statement + url-loader seems more straightforward to me than using LESS' data-uri().

[mdreizin]

The same for #43. It doesn't work and breaks LESS core functions.

[mdreizin]

@jhnns Have you got any progress about this issue?

[jhnns]

Sorry, I haven't got the time yet. There were some pretty weird things going on with the sass-loader ^^

[jhnns]

Fix shipped with 2.2.2