如何在 ES6、React Native、CommonJS 中正确地要求图像答案

【问题标题】：How to properly require images in ES6, React Native, CommonJS如何在 ES6、React Native、CommonJS 中正确地要求图像
【发布时间】：2019-05-24 11:09:48
【问题描述】：

在我的应用中随处可见一些图片。想象一下用户的默认头像，比如按钮图标等。

我阅读了 React 文档，但他们没有详细介绍如何更好地处理 require 经常使用的图像。

https://facebook.github.io/react-native/docs/images

我的应用是这样的结构

...
./assets/images/like.png
./assets/images/default-avatar.png
./components/Newsfeed.js
./components/Home.js
...

我像这样在render() 函数的主体中使用require。但我注意到图片需要很长时间才能加载。

render() {
  ...
  posts && posts.map(post => <Post likeUrl={require('../assets/images/like.png')}>)
  ...
}

我正在试验，所以我将require 移到顶部，然后在我的Newsfeed.js 和Home.js 中重构。加载这些组件时确实有明显的改进。

...

const LIKE = require('../assets/images/like.png')

export class Newsfeed extends Component {
  render() {
    ...
    posts && posts.map(post => <Post likeUrl={LIKE}>)
    ...
  }
}

我想知道是否有办法构建项目，这样我就不必在多个地方require。

奖励积分：

requireing 会像我怀疑的那样性能更高吗？还是我只是在想象。
如果是这样，将这些图像导入一个集中位置、使其可导出、然后将它们导入另一个文件以供使用的好方法是什么？

提前致谢！

【问题讨论】：

一般来说，我创建一个组件，在其中导入图像，然后在我想要的位置导入该组件，因此您只需在组件中导入一次

标签： reactjs react-native ecmascript-6 commonjs

【解决方案1】：

由于@Thinker 解决方案似乎对您有用，我只添加了另一个解决方案。我建议你将你的项目图像资源减少到几乎为 0。导入图像总是有问题。它们不仅会大大增加你的 git repo 大小，而且它们在 CSS 中也很难管理。您也不希望移动设备和桌面设备都需要相同的文件。此外，每次您请求与代码托管在同一域中的图像时，您还必须传输不是最佳的 cookie。因此，让我们总结一下在代码中导入图像所带来的问题：

移动/桌面优化很难（您还需要有 1x、2x 和 3x）
与您的代码主机相同的 cookie 和可能的缓存设置
显着增加您的代码库

我的建议是尽快使用 CDN。阿里巴巴OSS（中国）提供非常便宜但高质量的服务。您可以使用 CSS 媒体查询通过设置不同的背景图像来处理不同的大小。阿里巴巴还为您提供了这个不错的功能，您只需上传您的 3x 大小，并通过传递不同的查询参数获得 2x 和 1x。缓存设置和所有 CDN 问题也已修复。如果您不想购买任何东西，您也可以自己做同样的事情，但功能更少，更令人头疼，但我不推荐。

【讨论】：

【解决方案2】：

如果我想在我的应用程序中多次使用一张图片，那么我会这样做。

我创建了一个名为“image_container.js”的通用文件并进行如下更改：

export const Likes = require('./assets/images/like.png')
export const DefaultAvatar = require('./assets/images/default-avatar.png')

我将从该文件中导入图像以使用它。

import { Likes, DefaultAvatar } from './image_container'

export class Newsfeed extends Component {
  render() {
      ...
      posts && posts.map(post => <Post likeUrl={Likes}>)
      ...
  }
}

通过这样做，我需要图像一次并在我的应用程序中多次使用它。

希望对你有帮助:)

【讨论】：