Image.resolveAssetSource doesn't work correctly in RNW

[TQCasey]

Image.resolveAssetSource doesn't work correctly in RNW

[necolas]

Thank you for reporting an issue. Please note that an issue must include the information that is marked as REQUIRED below, or it may be closed

https://raw.githubusercontent.com/necolas/react-native-web/master/.github/ISSUE_TEMPLATE/bug.md

[TQCasey]

I figured it out .

Any one need Image.resolveAssetSource ,just try this .

if (Platform.OS == "web") {
	Image.resolveAssetSource = (base64) => {

		// strip tag png 
		if (base64.indexOf ('data:image/png;') >= 0) {
			base64 = base64.substring(base64.indexOf(',') + 1)
	
			const header = atob(base64.slice(0, 50)).slice(16, 24)
			const uint8 = Uint8Array.from(header, c => c.charCodeAt(0))
			const dataView = new DataView(uint8.buffer)
		
			return {
				width: dataView.getInt32(0),
				height: dataView.getInt32(4)
			}
		}
	
		// strip tag for jpeg 
		if (base64.indexOf ('data:image/jpeg;') >= 0) {
			base64 = base64.substring(base64.indexOf(',') + 1)
	
			let bindata = atob (base64);
			const data = Uint8Array.from(bindata, c => c.charCodeAt(0))
	
			var off = 0;
			while (off < data.length) {
				
				while (data [off] == 0xff) off++;
				var mrkr = data [off];  off++;
	
				if (mrkr == 0xd8) continue;    // SOI
				if (mrkr == 0xd9) break;       // EOI
				if (0xd0 <= mrkr && mrkr <= 0xd7) continue;
				if (mrkr == 0x01) continue;    // TEM
	
				var len = (data [off] << 8) | data [off + 1];  
				off += 2;  
	
				if(mrkr == 0xc0) { 
					return {
						type        : 'jpeg',
						bpc         : data [off],     // precission (bits per channel)
						width       : (data [off + 1]<<8) | data [off + 2],
						height      : (data [off + 3]<<8) | data [off + 4],
						cps         : data [off + 5]    // number of color components
					}
				}
				off+=len-2;
			}
		}
	}
}

[nabilfreeman]

Thanks @TQCasey ! We also ran into this problem. Just wondering, why is this happening to some people?

Our versions:

• React Native Web 0.13.16
• React Native 0.63.3

[nabilfreeman]

Oh yeah, because I'm using react-native-fast-image. Will dig more and write up here if it's more of an issue there or here.

[ApayRus]

If you need width and height of an image, you should use on RN web Image.getSize instead of Image.resolveAssetSource

require(file/path) will be converted to local file url and it will work fine.

Image.getSize(require('path/to/file'), callback)

[jasonmayes]

Having same issue in this example reported by a user: https://snack.expo.dev/@ageron/tfjs-test-2

Can anyone advise?

[adids1221]

Hi, I'm currently working on VideoPlayer component that uses 'react-native-video' library which uses 'resolveAssetSource' function.

Can anyone advise how to overcome this issue? Are there any plans to solve this issue?

[flyskywhy]

Hi, I'm currently working on VideoPlayer component that uses 'react-native-video' library which uses 'resolveAssetSource' function.

Can anyone advise how to overcome this issue? Are there any plans to solve this issue?

@adids1221 , I resolved your specific issue in your specific https://github.com/necolas/react-native-web/issues/2509#issuecomment-1647535717