React本机图像uri不工作
React本机图像uri不工作
提问于 2017-03-27 15:25:53
我试图显示本地文件中的图像，所以我尝试这样做。
<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模拟器上的所有数据，但结果仍然一样。我做错了什么吗？这方面是否有更好的实现？
非常感谢:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-03-27 19:50:38
不能够require()动态路径是see本机的一种预期行为，包程序需要预先知道路径-请参阅对土著问题作出反应
我们在我们的项目中遇到了这个问题，我们在DB上存储图像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} />
...
}可能不适合您的确切用例，但希望您能够利用它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43050468
复制相关文章
相似问题
腾讯云开发者
