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

我对 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 中?


慕田峪7331174
浏览 153回答 3
3回答

茅侃侃

您可以让一个文件导入所有图像,例如//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]

收到一只叮咚

您可以尝试:用于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}`);

动漫人物

我首先想到的是创建无状态组件,它将获取您的标志对象并显示具有特定路径的标签。它不会像 React 建议的那样导入,但它会完成工作 :) 相反,如果你真的想使用 React 方法,你可以使用 require 而不是导入。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript