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

Posted 2023-02-16

【中文标题】将 <Image> 与本地文件一起使用

【英文标题】：Use <Image> with a local file

【发布时间】：2015-05-31 04:15:54

【问题描述】：

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

但我不确定 react 会在哪里获得这些图像。这些示例没有任何域，因此您似乎必须转到 Xcode 并将它们添加到 Images.xcassets，但这对我不起作用。

【参考方案1】：

您必须向源属性添加一个具有名为“uri”的属性的对象，您可以在其中指定图像的路径，如下例所示：

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

记得通过 style 属性设置宽度和高度：

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

【讨论】：

我认为 OP 正在寻找如何制作静态图像，而不是网络加载的图像。

【参考方案2】：

来自 UIExplorer 示例应用：

静态资产应以image!为前缀，位于应用程序包中。

像这样：

render: function() 
  return (
    <View style=styles.horizontal>
      <Image source=require('image!uie_thumb_normal') style=styles.icon />
      <Image source=require('image!uie_thumb_selected') style=styles.icon />
      <Image source=require('image!uie_comment_normal') style=styles.icon />
      <Image source=require('image!uie_comment_highlighted') style=styles.icon />
    </View>
  );

【讨论】：

哦！我没有注意到这个带有图像的例子。谢谢你指点。尽管如此，我仍然无法让它在我的测试项目中运行。稍后将继续尝试并发布我的结果

你把图片放在项目的什么位置？我尝试通过将其拖到 Xcode 中来将其添加到 Images.xcassets 中，但只是得到“未知模块“图像！背景”。代码在这里：gist.github.com/StefanWallin/3abbb026c03615545bd8

所以最后我的问题与包裹有关。 This answer 帮助修复了它。

【参考方案3】：

它完全按照您的预期工作。有一个错误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 让他们知道您的设置。

【讨论】：

谢谢。我会投票给你的答案，但我在 StackExchange 中仍然太新。无论如何，标记为好:)

您不必再编辑文件了。修复似乎是将图像拖放到资产包并保持名称与磁盘上的文件名相同。

【参考方案4】：

在我意识到我没有将图像放入我的Image.xcassets 之前，我遇到了同样的问题。我可以在 Image.xcassets 打开的情况下将它拖放到 Xcode 中，重建后，它解决了问题！

【讨论】：

如果我们想从 'custom.xcassets' 访问图像怎么办？你能帮我吗***.com/questions/39203388/…

【参考方案5】：

这来自https://github.com/facebook/react-native/issues/282 为我工作：

adekbadek 于 2015 年 11 月 11 日发表评论 应该提到的是，您不必将图像放在 Images.xcassets 中 - 您只需将它们放在项目根目录中，然后就像 @anback 所写的那样 require('./myimage.png') 看看这个 SO 答案和它引用的拉动

【参考方案6】：

使用面向 ios 的 React Native 0.41（2017 年 3 月），我发现它很简单：

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

图像文件必须与需要它的 .js 文件位于同一文件夹中，“./”才能正常工作。

我不必更改 XCode 项目中的任何内容。它刚刚工作。

请注意，路径似乎必须以“./”或“../”开头，并且必须全部小写。我不确定所有的限制是什么，但是从简单的开始并继续工作。

希望这对某人有所帮助，因为这里的许多其他答案似乎过于复杂并且充满了（顽皮的）场外链接。

更新：顺便说一句 - 官方文档在这里： https://reactnative.dev/docs/images

【讨论】：

即使官方文档说 - 我可以创建一个名为 img 的文件夹，然后我可以将所有图像放入该文件夹。它对我不起作用！我必须将所有图像放在 .js 所在的同一文件夹中。奇怪！！！

这绝对对我有帮助。我的问题是我将图像文件夹放在程序文件夹之外

【参考方案7】：

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

Logo.json

"file" : "base64 big string"

App.js

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

【讨论】：

应该是<Image source=uri:Logo.file />

【参考方案8】：

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

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

这里我把我的图片放在了资产文件夹中。

【参考方案9】：

如果动态加载图像，可以创建一个如下所示的 .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 (...);

【参考方案10】：

ES6 解决方案：

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

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

然后：

<Image source=uri: DEFAULT_IMAGE />

【参考方案11】：

我们可以这样做：

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





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

【讨论】：

唯一对我有用的东西，谢谢！