将<img/>与本地文件一起使用

Question

文档说，引用静态图像的唯一方法是使用require。

但是我不确定那些图片的反应在哪里。这些示例没有任何域名，因此您似乎必须转到Xcode并将它们添加到Images.xcassets，但这对我来说并不适合。

Answer 1

使用React Native 0.41（2017年3月），以iOS为目标，我发现它很简单：

<Image source={require('./myimage.png')} />

图像文件必须与需要它的.js文件存在于同一文件夹中。

我没有必要改变XCode项目中的任何内容。它刚刚起作用。也许事情在2年内发生了很大变化！

请注意，如果文件名中包含除小写字母以外的任何内容，或者路径超过＆＃34; ./"，那么对我来说，它开始失败。不确定这些限制是什么，但要从简单开始并向前发展。

希望这对某人有所帮助，因为上面的所有答案看起来都过于复杂并且充满了（顽皮的）异地链接。

更新：BTW - 官方文档在这里： https://facebook.github.io/react-native/docs/images.html

Answer 2

它完全按照您的预期工作。有一个错误https://github.com/facebook/react-native/issues/282阻止它正常工作。

如果在与xcode项目相同的文件夹中有node_modules（带有react_native），则可以编辑node_modules / react-native / packager / packager.js并进行此更改：https://github.com/facebook/react-native/pull/286/files。它会神奇地工作:)

如果您的react_native安装在其他地方并且补丁不起作用，请对https://github.com/facebook/react-native/issues/282发表评论，让他们了解您的设置。

Answer 3

来自UIExplorer示例应用程序：

  

静态资产应该以{{1​​}}为前缀，并且位于应用包中。

所以这样：

image!

Answer 4

我在使用react-native-navigation遇到了麻烦，我创建了自己的标题组件，然后在标题之前的左侧插入了一个图像 - 作为徽标 - 然后当我触发导航到另一个屏幕然后再返回时，logo再次加载，超时接近1秒，我的文件是本地的。我的解决方案：

<强> Logo.json

{"file" : "base64 big string"}

<强> App.js

import Logo from '.../Logo.json'
...
<Image source:{{uri:Logo.file}} />

Answer 5

如果动态加载图像，则可以创建一个如下所示的.js文件，并在其中要求。

export const data = [
  {
    id: "1",
    text: "blablabla1",
    imageLink: require('../assets/first-image.png')
  },
  {
    id: "2",
    text: "blablabla2",
    imageLink: require('../assets/second-image.png')
  }
]

在组件.js文件中

import {data} from './js-u-created-above';
...

function UsageExample({item}) {
   <View>
     <Image style={...} source={item.imageLink} /> 
   </View>
}

function ComponentName() {
   const elements = data.map(item => <UsageExample key={item.id} item={item}/> );
   return (...);
}

Answer 6

这来自https://github.com/facebook/react-native/issues/282对我有用：

adekbadek于2015年11月11日发表评论 应该提到的是，您不必将图像放在Images.xcassets中 - 您只需将它们放在项目根目录中，然后只需要（＆＃39; ./ myimage.png＆＃39;）作为@anback写 看看这个SO答案和拉引用

Answer 7

要显示本地文件夹中的图像，您需要写下代码：

 <Image source={require('../assets/self.png')}/>

在这里，我已将我的图片放在资产文件夹中。

Answer 8

ES6解决方案：

import DefaultImage from '../assets/image.png';

const DEFAULT_IMAGE = Image.resolveAssetSource(DefaultImage).uri;

然后：

<Image source={{uri: DEFAULT_IMAGE}} />

Answer 9

我们可以这样做：

const item= {
    image: require("../../assets/dashboard/project1.jpeg"),
    location: "Chennai",
    status: 1,
    projectId: 1
}




<Image source={item.image} style={[{ width: 150, height: 150}]} />

Answer 10

您必须在source属性中添加一个名为＆＃34; uri＆＃34;的属性的对象。您可以在其中指定图像的路径，如以下示例所示：

<Image style={styles.image} source={{uri: "http://www.mysyte.com/myimage.jpg"}} />

记住然后通过style属性设置宽度和高度：

var styles = StyleSheet.create({
   image:{
    width: 360,
    height: 40,
  }
});