Reactjs：如何从可变路径导入图像

Question

我对 Reactjs 比较陌生，所以我可能遗漏了一些明显的东西：我有一个组件 (DisplayFlags.js)，它根据先前选择的大洲显示国旗和国家名称。我已经设置好一切：所有可能的旗帜图像都存在于本地，我还有一个名为“myCountries”的 js 对象，它将每个大陆映射到它的国家，并将每个国家映射到它的名称 + 本地旗帜图像名称。这是它的一部分：const myCountries ={    "north-america": {        "US": {            "name": "United States",            "picPath": "flag-of-United-States.png"        },        "UM": {            "name": "United States Minor Outlying Islands",            "picPath": "flag-of-United-States-Minor-Outlying-Islands.png"        },        "CA": {            "name": "Canada",            "picPath": "flag-of-Canada.png"        },        "MX": {            "name": "Mexico",            "picPath": "flag-of-Mexico.png"        },//etc},"south-america":{  "AR": {            "name": "Argentina",            "picPath": "flag-of-Argentina.png"        },        "BO": {            "name": "Bolivia",            "picPath": "flag-of-Bolivia.png"        },//etc}}我打算做什么：循环遍历先前选定大陆的所有国家，并将“名称”和“picPath”作为道具传递给另一个组件 SingleCountry.js，后者依次显示它们。我的问题是导入：我通常只写（示例）：import randomImage from '../../img/icons/some-image-name.png'然后在我的组件中使用 randomImage 作为 img 元素的 src。在这种情况下，有没有办法从 props 中传递的路径导入图像？就像是：import flagImage from "../../img/flags/" + this.props.picPath我知道以上内容不起作用，因为导入在组件之外工作，并且它们无权访问任何类型的道具。我可以在组件内部导入吗？或者我应该完全放弃它并在 DisplayFlag.js 中批量导入图像，然后将图像一张一张地传递到 SingleCountry.js 中？

Answer 1

您可以让一个文件导入所有图像，例如

//images/index.js

import image1 from './image1.png'

import image2 from './image2.png'

.

.

export default {

image1,

image2,

.

.

}

您可以从此处导出的对象动态访问图像

import images from './images/index.js'

images['image1'] 

// or dynamically

let name = 'image2'

images[name]

Answer 2

您可以尝试：

用于import浏览器和nodejs

const picture = (await import(`../path/to/file/${this.props.picPath}`)); // this is async

用于require浏览器和nodejs

const picture = require(`../path/to/file/${this.props.picPath}`); // this is sync

使用readFileSyncfromfs仅用于nodejs

const fs = require('fs')

// or: import fs from 'fs'

const file = fs.readFileSync(`../path/to/file/${this.props.picPath}`).toString()

使用readFilefromfs仅用于nodejs

const fs = require('fs')

// or: import fs from 'fs'

const file = (await fs.readFile(`../path/to/file/${this.props.picPath}`)).toString()

提示#1：

当你使用require时，它只能处理json和js文件，但是当你使用import时，它可以处理svg等东西。但是您可以应用一些技巧，例如：

// in tsconfig.json

"include": [

    "./declarations.d.ts",

],

// in declaration.d.ts

declare module '*.png';

提示#2：

当你想导入像这样的图像时png，你应该定义它是如何工作的：

declare module "*.png" {

  const value: any;

  export default value;

}

提示 #3 在 javascript 中，您可以使用和 来使用模板文字。``${}

const name = "John"
console.log(`Hello ${name}`);

Answer 3

我首先想到的是创建无状态组件，它将获取您的标志对象并显示具有特定路径的标签。它不会像 React 建议的那样导入，但它会完成工作 :) 相反，如果你真的想使用 React 方法，你可以使用 require 而不是导入。