首頁猿問 Reactjs：如何從可變路徑導入圖像

Reactjs：如何從可變路徑導入圖像

JavaScript

慕田峪7331174 2023-06-09 17:31:57

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

查看完整描述

3 回答

茅侃侃

TA貢獻1842條經驗獲得超22個贊

您可以讓一個文件導入所有圖像，例如

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

反對回復 2023-06-09

收到一只叮咚

TA貢獻1821條經驗獲得超5個贊

您可以嘗試：

用于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}`);

反對回復 2023-06-09

動漫人物

TA貢獻1815條經驗獲得超10個贊

我首先想到的是創建無狀態組件，它將獲取您的標志對象并顯示具有特定路徑的標簽。它不會像 React 建議的那樣導入，但它會完成工作 :) 相反，如果你真的想使用 React 方法，你可以使用 require 而不是導入。

反對回復 2023-06-09

3 回答
0 關注
203 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Reactjs：如何從可變路徑導入圖像

Reactjs：如何從可變路徑導入圖像

3 回答

添加回答