如何在不导入或不需要的情况下使用 React Typescript 中路径中的图像？

Question

我有一个 Typescript 程序，其readable name: img_path映射保存在.ts文件中。 基于某些标准，我想将一个单独的条目传递给一个组件，然后该组件将显示readable name作为标题，并在其下方显示保存在img_path中的图像。 我可以在 Javascript 中执行此操作，但由于某种原因在 Typescript 中，它不允许我使用require 。 我习惯的解决方案是这样的：

<img src={require(props.imgPath)} />

但是，在 Typescript 中给我错误： Uncaught ReferenceError: require is not defined

根据我的研究，我应该使用import ，例如：

import myi from "src/assets/myImage.png"

然后在我的渲染 function 中，做

<img src={myi} />

但是，由于导入必须在文件顶部完成，因此您不能使用传递到组件中的变量。 因此，这不适用于动态决定的配对。 （一个选择是导入每个单独的图像，但是有很多图像，如果我根本改变映射，我将不得不找到所有组件文件并在那里更新它们）。

如何将带有图像路径的字符串传递给 Typescript 组件并让该组件显示图像，而不使用import或require ？

Answer 1

我发现的最统一的方法是创建一个单独的images.ts文件，其内容为：

import img0 from "filepath0"
import img1 from "filepath1"
...
import imgN from "filepathN"

export const images : {[key:string] : any} = {
    "filepath0" : img0,
    "filepath1" : img1,
    ...
    "filepathN" : imgN,
}

然后在要使用图像的任何文件中，调用：

import { images } from "../images";

然后您可以将路径传递到images object（例如images[props.imgPath] ）中以获取实际图像。 例如：

// RENDER
return <img src={images[props.imgPath]} />;

（注意：或者，您可以仅使用图像名称而不是其完整路径来引用图像，方法是将名称存储为images object 而不是路径本身中的键）

- - 额外的 - -

如果你有很多图像，你不想手动写出images.ts文件。 我使用以下内容使其更容易创建。

第 1 部分：获取图像文件名

在包含您的图像（希望只是您的图像）的文件夹中，打开命令终端并运行：

dir /b /a:-d /o:n > filelist.txt

（ dir提供文件列表， /b /a:-d /o:n仅提供名称而不提供任何其他详细信息，例如大小或日期，并且> filelist.txt将 output 保存到 txt 文件而不是终端本身。）

打开文件并从中删除“filelist.txt”任何其他不是图像的名称。

第 2 部分：获取进口清单

在保存“filelist.txt”的文件夹中，使用 Python（在命令终端中使用 python 或 python IDE）运行以下命令：

with open("filelist.txt") as f:
    names = [x.strip() for x in f.readlines()]

这将创建所有图像文件名的列表names （删除原始文本文件中每行末尾的\n ）。

创建一个新列表，其中包含图像的完整路径，因为 react 希望看到它：

paths = [PATH + name for name in names]

对于每个图像，您在 PATH 中输入的内容都是相同的。 例如

paths = ["src/MyApp/assets/" + name for name in names]

然后做：

for i in range(len(names)):
    print ("import img" + str(i) + " from \"" + paths [i] + "\"")

这import img0 from "filepath0" 。 将它们复制到您的反应文件中。

第 3 部分：获取映射 object

在你的反应文件中export const images: {[key:string]: any} = 。

然后在您的 python 程序中运行以下命令，并将 output 粘贴到您的反应文件中等号后面：

dict([(paths[i], "img" + str(i)) for i in range(len(paths))])

这将输出由"filepath0": img0"语句组成的字典（Javascript 对象）。

如果您希望每个"filepath0": img0"在自己的行上而不是一个接一个，请改用 python 打印语句：

print ("{")
for i in range(len(paths)):
    print("    \"" + paths[i] + "\" : img" + str(i) + ",")
print ("}")

将 output 复制到您的 react 文件中，确保在最后一行"filepath0": img0"之后删除, 。

Answer 2

/images/index.tsx 文件

// step 1: import the image 
import logoDark from './images/logo-dark.png'
import logoLight from './images/logo-light.png'
import appIcon from './images/favicon.png'

const assets: any = {
// not working 
// images: {
//   logoDark: require('./images/logo-dark.png'),
//   appIcon: require('./images/favicon.png')
// },

// working 
// step 2: import the image 
  images: {
    logoDark: logoDark,
    logoLight: logoLight,
    appIcon: appIcon
  },

}

export default assets

使用/渲染

//client/src/layout/appLayout.tsx file
import assets from '../assets'
<img
src={assets.images.logoLight}
style={{ width: '100px' }}
alt='app logo'
/>