question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

strange inline data uris with next 6

See original GitHub issue

Hi @cyrilwanner this is a great idea, but having some issues getting it working. My inline images are being generated with data uris like this:

data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJkMzI1YWI2YzI3ZWEyYzg5NzRmNGMyYjQ5MDI2NGE4YS5wbmciOw==

which, when decoded, contains text content like this:

module.exports = __webpack_public_path__ + "d325ab6c27ea2c8974f4c2b490264a8a.png";

which clearly isn’t an image. Is this an incompatibility with next 6 situation I’m encountering here?

Any help appreciated!

fyi. just using imagesFolder and imagesPublicPath config keys.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
notatestusercommented, May 4, 2018

Oops, it was the file-loader. we have quite a large next.config.js and it was hiding down at the bottom. sorry for the false alarm and I can confirm that it’s now working as intended. 😄

There still seems to be an issue with a jest test breaking due to an image but that’s a different topic.

0reactions
notatestusercommented, May 4, 2018

Wait, I think I might have found what is doing it-

config.module.rules.push({
  test: /\.(ico|gif|png|jpg|jpeg|svg|webp|eot|ttf|woff|otf)$/,
  use: [
    'file-loader',
  ],
});

let me remove this and see what happens.

Read more comments on GitHub >

github_iconTop Results From Across the Web

09: SVG with Data URIs - CSS-Tricks
You can use that same inline SVG in other places as well, like in an <img> or background-image . It's pretty weird. It's...
Read more >
Why use data URI scheme? - Stack Overflow
Web browsers are usually configured to make only a certain number (often two) of concurrent HTTP connections to a domain, so inline data...
Read more >
Data URIs explained - Human Who Codes
Inline images use the data: URI scheme to embed the image data in the actual page. This can increase the size of your...
Read more >
Data URLs - HTTP - MDN Web Docs - Mozilla
Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. They were formerly known as ......
Read more >
Detecting Support for data: URIs - Weston Ruter
I came up a way of doing this by utilizing the following script which I place as an inline script in the document...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found