React Native Image uri不起作用

Question

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

<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 ='img_src/BTI.jpg'.我尝试在android工作室中删除我的android模拟器上的所有数据,但结果仍然相同.难道我做错了什么？这有更好的实施吗？

非常感谢 :)

Answer 1

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

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

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

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

现在,打包者提前了解了所有路径并且很高兴.然后我们imageKey在DB项目中添加了一个并使用了它而不是绝对路径.为了抓住图像我们就是这么做的

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

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

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