Image url

Currently I want to load image from url not from local, and this is the code I use and it is not working, please help me to resolve this

        <Svg
          width= {Layout.window.width}
          height={Layout.window.height/2}
        >
          <Circle
            cx={data.xAxis}
            cy={data.yAxis}
            r="10"
            fill={data.departmentColorCode}
          />
          <Image
                    width="100%"
                    height="100%"
                    preserveAspectRatio="xMidYMid slice"
                    opacity={0.5}
                 href={{uri:data.floorImage}}/>
        </Svg>
      </View>

[nadude]

This seems to work for me href={{ uri: '<remote-image-url', __packager_asset:true }} . Good luck! @hle50 @ @fendorio @magicismight

[ricklancee]

hi @msand does this only work for apps via expo and not when importing Image from react-native-svg? Just tried this in a plain react native project i get the error:

JSON value '{
    uri = "https://avatars2.githubusercontent.com/u/1131362?s=460&v=4";
}' of type NSMutableDictionary cannot be converted to an image. Only local files or data URIs are supported.

Do we have to convert the image to a data uri before passing it into the href?

Edit: Using react-native-fetch-blob and using it as a temp file uri works.

import React from 'react'
import RNFetchBlob from 'react-native-fetch-blob'

import Svg, {
    Image,
} from 'react-native-svg'

import { View } from 'react-native'

class SvgImage extends React.Component {

    state = {
        uri: undefined,
    }

    async componentWillMount() {
        const res = await RNFetchBlob
           .config({
              // add this option that makes response data to be stored as a file,
              // this is much more performant.
              fileCache : true,
              // by adding this option, the temp files will have a file extension
             appendExt : 'jpg',
           })
          .fetch('GET', 'https://avatars2.githubusercontent.com/u/1131362?s=460&v=4')
       
        this.setState({
            uri: `file://${res.path()}`,
        })
    }

   render() {
        const { uri } = this.state

        return (
            <View>
                <Svg
                    height="100"
                    width="100"
                    viewBox="0 0 100 100"
                >
                    <Image
                        x="0"
                        y="0"
                        width="100%"
                        height="100%"
                        preserveAspectRatio="xMidYMid slice"
                        href={!uri ? require('./placeholder.png') : { uri }}
                    />
                </Svg>
            </View>
        )
    }
}