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
}
}

我打算做的是：遍历先前选定大陆的所有国家/地区，并将“名称”和“图片路径”作为道具传递给另一个组件 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

您可以尝试：

对浏览器和nodejs使用import

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

对浏览器和nodejs使用require

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

仅对nodejs使用fs readFileSync

const fs = require('fs')
// or: import fs from 'fs'

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

仅对nodejs使用fs readFile

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 2

你可以有一个文件导入所有的图像，比如

//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 3

我首先想到的是创建无状态组件，它将采用您的标志对象并显示具有特定路径的标签。 它不会像 react 建议的那样导入，但它会完成工作 :) 相反，如果你真的想要使用 react approches，你可以使用 require 而不是 import，请查看下面的问题，我认为它会让你满意：

为图像文件反应本机使用变量