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中？

解决方法

您可以尝试：

将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

仅对readFileSync使用fs中的nodejs

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

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

仅对readFile使用fs中的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中，您可以使用``和${}来使用Template Literals。

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

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

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

首先想到的是创建无状态组件，该组件将使用您的标志对象并显示具有特定路径的标记。它不会作为反应建议导入，但会完成工作:) 相反，如果您真的想使用反应方式，则可以使用require而不是import，在问题下方结帐，我认为它会满足您的要求：

react native use variable for image file

import javascript reactjs reactjs