如何在不導入或不需要的情況下使用 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'
/>