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