Repository navigation
Images with @2x or @3x in their file names are not resolved (breaks static image resources) #43
Description
Do you want to request a feature or report a bug?
Report a bug
What is the current behavior?
Images with @2x or @3x in the file name are not resolved when doing require('../myImage@2x.png'). If I remove the @ then it loads the file without an issue.
If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.
Others have reproduced this behavior as you can see 👉 react/react-native#15030
What is the expected behavior?
I expect the files to load and be resolved without an issue. This problem breaks static image resources 👉 https://facebook.github.io/react-native/docs/images.html#static-image-resources
Please provide your exact metro-bundler configuration and mention your metro-bundler, node, yarn/npm version and operating system.
I've used the stock version that comes with react-native 0.47.1.
I've also tried --reset-cache and finally I've also updated metro-bundler to version 0.11.0.
npm 5.0.3
yarn 0.27.5
Mac OSX 10.12.6
The only workaround I've found is to remove the @ when requiring the file
Activity
cpojer commentedon Oct 9, 2017
@jeanlauliac knows about assets.
jeanlauliac commentedon Nov 14, 2017
Sorry I've been lagging behind quite a lot.
About this issue: in Metro, assets are not meant to be required with a specific scale, since different devices might use different scales. In that example, requiring
./myImage.pngwould cause eithermyImage@2x.pngormyImage@3x.pngto be used depending on the device screen pixel ratio (virtual-pixel to physical-pixel ratio, so to speak).@mo-solnet can you explain what is the benefit of using
require('../myImage@2x.png')overrequire('../myImage.png')?jasperkuperus commentedon Dec 11, 2017
@jeanlauliac Is it an idea to add a better error if someone does use
@2xand then refer to this issue?jeanlauliac commentedon Dec 11, 2017
Yes, a specific error message sounds good to me. I would not refer to this issue though, I'd just mention that removing the scale specifier solves the problem.
jeanlauliac commentedon Jan 10, 2018
I haven't got the time to try to fit a hint message somewhere in the stack, but I'll close this issue for now, as this is the expected behaviour, and scale specifiers should not be included in the name when requiring assets. Do feel free to send a PR to tweak error messages however.
The documentation mentions having different densities and does have the example without the density specifier, so I don't think it needs updating? (https://facebook.github.io/react-native/docs/images.html#static-image-resources)