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.jsimport image1 from './image1.png'import image2 from './image2.png'..export default {image1,image2,..}您可以从此处导出的对象动态访问图像import images from './images/index.js'images['image1'] // or dynamicallylet name = 'image2'images[name]

Answer 2

您可以尝试：用于import浏览器和nodejsconst picture = (await import(`../path/to/file/${this.props.picPath}`)); // this is async用于require浏览器和nodejsconst picture = require(`../path/to/file/${this.props.picPath}`); // this is sync使用readFileSyncfromfs仅用于nodejsconst fs = require('fs')// or: import fs from 'fs'const file = fs.readFileSync(`../path/to/file/${this.props.picPath}`).toString()使用readFilefromfs仅用于nodejsconst 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.tsdeclare 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 而不是导入。