Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
timmywil opened this issue Jul 12, 2017 · 19 comments

Comments

@timmywil
Copy link

commented Jul 12, 2017

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

screenshot 2017-07-12 14 29 13

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.

@timmywil timmywil changed the title Upgrading to 0.46.1 breaks images with local source and filename that includes '@' symbol 0.46.1 does not resolve images with filenames that include '@' symbol Jul 12, 2017
@hramos

This comment has been minimized.

Copy link
Contributor

commented Jul 12, 2017

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

@moriarty1900

This comment has been minimized.

Copy link

commented Jul 13, 2017

I had the same issue. Upgrade from 0.44.3

@timmywil

This comment has been minimized.

Copy link
Author

commented Jul 13, 2017

I upgraded from 0.45.1.

@timmywil

This comment has been minimized.

Copy link
Author

commented Jul 13, 2017

I'll check 0.46.0 right now.

@timmywil

This comment has been minimized.

Copy link
Author

commented Jul 13, 2017

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

@Nomaq

This comment has been minimized.

Copy link

commented Jul 16, 2017

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"

@itchingpixels

This comment has been minimized.

Copy link

commented Jul 23, 2017

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

@jphchen

This comment has been minimized.

Copy link

commented Jul 25, 2017

I'm having the same issues as well

@pavanpodila

This comment has been minimized.

Copy link

commented Aug 19, 2017

Any solution for this? Its still a blocker on 0.47.1

@iegik

This comment has been minimized.

Copy link

commented Aug 23, 2017

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

@stale

This comment has been minimized.

Copy link

commented Oct 22, 2017

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.

@stale stale bot added the Stale label Oct 22, 2017
@timmywil

This comment has been minimized.

Copy link
Author

commented Oct 23, 2017

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

@stale stale bot removed the Stale label Oct 23, 2017
@hramos hramos changed the title 0.46.1 does not resolve images with filenames that include '@' symbol [Image] Retina Assets - Image component does not resolve images with filenames that include '@' symbol Oct 23, 2017
@fishmwei

This comment has been minimized.

Copy link

commented Nov 8, 2017

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

@hassanrazakhalid

This comment has been minimized.

Copy link

commented Nov 30, 2017

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 comment has been minimized.

Copy link

commented Jan 29, 2018

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.

@stale stale bot added Stale and removed Stale labels Jan 29, 2018
@stigi

This comment has been minimized.

Copy link
Contributor

commented Jan 30, 2018

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

This comment has been minimized.

Copy link

commented Feb 13, 2018

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

This comment has been minimized.

Copy link
Author

commented Feb 13, 2018

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

This comment has been minimized.

Copy link

commented Feb 13, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.