When requiring an image path I have to add .default

[jordyvandomselaar]

When importing an SVG I can require the path just fine

src={require("../assets/svg/dij-slash.svg")}

But when importing a jpg I have to import it like this:

image={require("../assets/img/content/diensten-support.jpg").default}

Notice the .default at the end. Is this intended?

[durchanek]

Found this happening for images that are not inlined, either because they are too large or because ?url is set. Filetype doesn't seem to matter, happening with SVGs too. Quite problematic because the image can break when its file size changes.
Tested in 2.5.8-canary.1

[calclavia]

I'm getting the same issue in v2.5.8 - not sure if it's related to using TypeScript? In my project all image require needs be used with a .default. For example: require('...pathtoimage.png').default. This behavior is strange as it doesn't apply when I use resize (maybe because it uses the responsive loader?). When using webp I have to use .default.

[jordyvandomselaar]

The issue is definitely as @durchanek described. Ran into the same case yesterday where .default was not required when the image got inlined.

[cyrilwanner]

Thank you all for the bug report! It should indeed not require the .default, otherwise, the automatic inlining for smaller images doesn't really make sense.

I think I was now able to reproduce the error. It appears to happen when you either manually install a newer file-loader version or any other plugin/package installs it.

It should now be fixed and I just published a new version: 2.6.0
Can you please try it again with this version? Thanks!

[durchanek]

@cyrilwanner Working great after the update. Thanks!

[jordyvandomselaar]

@cyrilwanner that fixed it. Thanks!

[l3v1k]

This isn't fixed issue for me, but I've fixed it by disabling fallback to url-loader through option inlineImageLimit: -1. Think there may be issue with url-loader's default config?

[Exelord]

Confirm. The issue is still there