React Native Image uri不起作用

时间:2017-03-27 15:25:53

标签: android react-native react-native-image

我尝试显示本地文件中的图像,所以我尝试这样做

<Image 
    source={{uri:'../../assets/img_src/BTI.jpg'}}
    style={{height:150,width:150}}
/>

我的容器组件似乎得到了高度和宽度,但图像没有加载。所以我试试这个

<Image 
    source={require('../../assets/img_src/BTI.jpg')}
    style={{height:150,width:150}}
/>

它很有效,不幸的是据我所知,如果我想先操作地址文件并将其存储到变量中,我就无法使用此实现。 例如:

const imgSrc = `../../assets/${data.image}`;

其中data.image =&#39; img_src / BTI.jpg&#39;。 我尝试在android工作室中删除我的android模拟器上的所有数据,但结果仍然相同。难道我做错了什么?对此有更好的实施吗?

非常感谢:)

1 个答案:

答案 0 :(得分:10)

无法require()动态路径是React Native的预期行为,打包者需要提前知道路径 - 请参阅React Native issues

我们在项目中遇到了这个问题,我们在我们的数据库中存储了图像URL,并希望在应用程序中连接字符串以获取本地存储图像的路径。正如您所发现的,这不起作用。您可能会发现我们的解决方法很有用。

在我们的/images文件夹中,我们创建了一个新的images.js文件,该文件只导出了一个对象,其键映射到我们所有的本地图像路径,如此

  export const Images = {
    image1: require('./image1.png'),
    image2: require('./image2.png'),
    image3: require('./image3.png'),
  };

现在,打包者提前了解所有路径,并且很高兴。然后我们向DB项添加了imageKey并使用了它而不是绝对路径。要抓取图像我们只是做了

import { Images } from '../images/images';
// get your image key e.g. passed down through props
const img = Images[imageKey];

...
render() {
    ...
    <Image source={img} />
    ...
}

可能不适合您的确切用例,但希望您可以使用它。