[Image] Retina Assets - Image component does not resolve images with filenames that include '@' symbol

[timmywil]

Is this a bug report?

Yes, this worked in previous versions.

Have you read the Bugs section of the Contributing to React Native Guide?

Yes

Environment

1. react-native -v: 0.46.1
2. node -v: 8.1.4
3. npm -v: 5.2.0
4. yarn --version (if you use Yarn): none

Then, specify:

1. Target Platform (e.g. iOS, Android): both
2. Development Operating System (e.g. macOS Sierra, Windows 10): macOS Sierra
3. Build tools (Xcode or Android Studio version, iOS or Android SDK version, if relevant): Xcode 8.3.3, Android Studio 2.3, iOS 10.3, Android 7.1.1

Steps to Reproduce

(Write your steps here:)

import React from 'react'
import { Image } from 'react-native'
import logo from '../images/logo@2x.png'

export default function Example () {
  return <Image source={logo} />
}

Expected Behavior

Image loaded correctly and displayed.

Actual Behavior

Reproducible Demo

The demo is made from create-react-native-app, eject, and react-native-git-upgrade.

https://github.com/timmywil/react-native-bug-example

I realize the workaround is simple, but I figure a regex got edited somewhere and this is a one-line fix.

[hramos]

When did it break? Did you upgrade from 0.46 or from an earlier version?

[moriarty1900]

I had the same issue. Upgrade from 0.44.3

[timmywil]

I upgraded from 0.45.1.

[timmywil]

I'll check 0.46.0 right now.

[timmywil]

The bug exists in 0.46.0, so something changed between 0.45.1 and 0.46.0.

[Nomaq]

I have the same problem images not loading now Icon-83.5@2x.png' as a folder: it did not contain a package, nor an index file"

[almostintuitive]

this is also blocking us. upgraded from 0.45.1 to 0.46.

[jphchen]

I'm having the same issues as well

[pavanpodila]

Any solution for this? Its still a blocker on 0.47.1

[iegik]

@pavanpodila Rename images. image@2x.png -> image-x2.png

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[timmywil]

This should remain open because it's a regression and '@' is a common character in image filenames.

[fishmwei]

I'm having the same issues as well , version 0.49.3

[hassanrazakhalid]

I am facing same issue. I have invest-icon.png, invest-icon@2x.png, invest-icon@3x.png. But each time when i use require. It always show 1x or invest-icon.png image. I have tested one scenario that if i removed invest-icon.png then it will divide @2x image by 2 and show that and i delete @2x image then it will devide @3x image by 3 and use that image. I am testing Iphone 7 and 7 plus. Why it is not picking @2x. It is always trying to get 1x image.

<Image
              source={require('../resources/images/invest-icon.png')}
            />

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[stigi]

It's 2018 and I am seeing the exact same issue as @hassanrazakhalid and the others above described.
I'm on version 0.51.0.

I have icon.png, icon@2x.png and icon@3x.png and am using it a la

import icon from `./icon.png`

<Image source={icon} />

The dimensions of icon.png are 12x12px. The @2x dimensions are 24x24px, @3x are 36x36px. I would expect the Image to render in 12x12pt but it renders in 6x6pt. I'm testing on an iPhone 6 Simulator running iOS 11.2. PixelRatio.get() gives 2.

I believe I followed the instructions on https://facebook.github.io/react-native/docs/image.html exactly, but either there's a small nuance I'm missing, or this is a bug. But since there's not a huge outcry it's hard for me to believe the later.

[codebymikey]

Did some more digging.

<Image source={require('./my-icon@2px.png')} /> should now be replaced with <Image source={require('./my-icon.png')} />.
React Native/Metro Bundler will pick the correct one based on the device's screen density.

Relevant documentation: https://facebook.github.io/react-native/docs/0.53/images.html

I think it's definitely related to the move from react-native/packager to metro.

[timmywil]

LOL, so it's not a bug it's a feature! I guess it doesn't make sense to allow the '@' character in filenames if react native is going to add the character itself when choosing an image from the file system. Perhaps this can be closed then. But I'll let a project maintainer close it to be sure.

[codebymikey]

Yup, I'm still not sure why it wasn't included in the release notes as a breaking change though.
Just led me wasting about an hour an half debugging the code before I finally found out what was happening.