第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

Reactjs：如何從可變路徑導(dǎo)入圖像

Reactjs：如何從可變路徑導(dǎo)入圖像

慕田峪7331174 2023-06-09 17:31:57
我對 Reactjs 比較陌生，所以我可能遺漏了一些明顯的東西：我有一個組件 (DisplayFlags.js)，它根據(jù)先前選擇的大洲顯示國旗和國家名稱。我已經(jīng)設(shè)置好一切：所有可能的旗幟圖像都存在于本地，我還有一個名為“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}}我打算做什么：循環(huán)遍歷先前選定大陸的所有國家，并將“名稱”和“picPath”作為道具傳遞給另一個組件 SingleCountry.js，后者依次顯示它們。我的問題是導(dǎo)入：我通常只寫（示例）：import randomImage from '../../img/icons/some-image-name.png'然后在我的組件中使用 randomImage 作為 img 元素的 src。在這種情況下，有沒有辦法從 props 中傳遞的路徑導(dǎo)入圖像？就像是：import flagImage from "../../img/flags/" + this.props.picPath我知道以上內(nèi)容不起作用，因為導(dǎo)入在組件之外工作，并且它們無權(quán)訪問任何類型的道具。我可以在組件內(nèi)部導(dǎo)入嗎？或者我應(yīng)該完全放棄它并在 DisplayFlag.js 中批量導(dǎo)入圖像，然后將圖像一張一張地傳遞到 SingleCountry.js 中？
查看完整描述

3 回答

?
茅侃侃

TA貢獻1842條經(jīng)驗 獲得超22個贊

您可以讓一個文件導(dǎo)入所有圖像，例如


//images/index.js


import image1 from './image1.png'

import image2 from './image2.png'

.

.

export default {

image1,

image2,

.

.

}

您可以從此處導(dǎo)出的對象動態(tài)訪問圖像


import images from './images/index.js'

images['image1'] 


// or dynamically

let name = 'image2'

images[name]


查看完整回答
反對 回復(fù) 2023-06-09
?
收到一只叮咚

TA貢獻1821條經(jīng)驗 獲得超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等東西。但是您可以應(yīng)用一些技巧，例如：


// in tsconfig.json

"include": [

? ? "./declarations.d.ts",

],

// in declaration.d.ts

declare module '*.png';

提示#2：


當你想導(dǎo)入像這樣的圖像時png，你應(yīng)該定義它是如何工作的：


declare module "*.png" {

? const value: any;

? export default value;

}

提示 #3?在 javascript 中，您可以使用和 來使用模板文字。``${}


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




查看完整回答
反對 回復(fù) 2023-06-09
?
動漫人物

TA貢獻1815條經(jīng)驗 獲得超10個贊

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

查看完整回答
反對 回復(fù) 2023-06-09
  • 3 回答
  • 0 關(guān)注
  • 194 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號