[Image] Get the asset scale which is closest to the window scale

[EvanBacon]

#237

[EvanBacon]

We need to round the size so you always get the most crisp image.

[necolas]

Please could you add unit tests for this feature?

[ericvicenti]

1. This fix looks great for most apps
2. It will totally screw up server-rendering, because window.pixelRatio is only on the client, and images will loaded twice at different resolutions

So I agree this is the simplest and preferred option for normal client apps. But for SSR+client apps, maybe we could consider an implementation with <img srcset=..?

[necolas]

This is why it needs to use PixelRatio, where the values can be set on the server based on client hints. source is also not rendered on the server, so this would only be for defaultSource.

[ericvicenti]

Relying on client hints is quite imprecise, and it breaks/complicates caching.

Even if you could predict the window size from the server, the required resolution depends on the layout in the app. Maybe a larger image is justified on mobile if it takes up the full screen, in contrast to an icon.

@necolas, you've been much deeper into web eng than me for the past few years. Can I ask why you're not interested in using srcset? For these reasons I think it is more appropriate for the browser to determine which resolution to download.

Here's a nice article on it.. https://medium.com/hceverything/applying-srcset-choosing-the-right-sizes-for-responsive-images-at-different-breakpoints-a0433450a4a3

[MoOx]

I also think we should keep cached SSR in mind (static rendering) by using srcset somewhere... I know it will be harder since we are currently using a background image with a img overlay for accessibility, but maybe we could go for a simpler img + srcset + object-fit, don't you think?

[msand]

Would it be possible to expose the resolveAssetUri helper? Or some way to get the uri from a require('./img.ext') call? It's needed for implementing svg raster image embedding in the web support of react-native-svg

Current ugly workaround / hack: (There must be a better way)

https://snack.expo.io/@msand/react-native-svg-example
used in ./Examples/Image.js
defined in ./components/SnackImageCompat.web.js

import React, { Component, Fragment } from 'react';
import { Image as NativeImage, View } from 'react-native';
import { Image as SvgImage } from 'react-native-svg';

class WebImage extends NativeImage {
  constructor(props, context) {
    super(props, context);
    this._setImageRef = ref => {
      this._imageRef = ref;
      const attrs = ref && ref.attributes;
      const src = attrs && attrs.src;
      const uri = src && src.value;
      this.setState({ href: uri });
    };
    this.oldRender = this.render;
    this.render = () => {
      const uri = this.state && this.state.href;
      return (
        <Fragment>
          <View
            style={{
              visibility: 'hidden',
              position: 'absolute',
              width: 0,
              height: 0,
            }}>
            {this.oldRender()}
          </View>
          <SvgImage {...this.props} href={uri} />
        </Fragment>
      );
    };
  }
}

export default props => (
  <WebImage {...props} source={props.source || props.href} />
);

[EvanBacon]

Closing in favor of #1456

[msand]

@EvanBacon Is there any other way to get the uri of images in snack / expo web?