प्रतिक्रियाशील मूल - छवि को गतिशील नामों का उपयोग करके मॉड्यूल की आवश्यकता होती है

Question

मैं वर्तमान में प्रतिक्रिया मूल निवासी का उपयोग करके एक परीक्षण ऐप बना रहा हूं। छवि मॉड्यूल, इस प्रकार अब तक ठीक काम कर रहा है।

उदाहरण के लिए, यदि मेरे पास एक छवि है avatar, तो नीचे दिया गया कोड स्निपेट ठीक काम करता है।

<Image source={require('image!avatar')} />

लेकिन अगर मैं इसे एक गतिशील स्ट्रिंग में बदल देता हूं, तो मुझे मिलता है

<Image source={require('image!' + 'avatar')} />

मुझे त्रुटि मिली:

अज्ञात मॉड्यूल "छवि! अवतार" की आवश्यकता है। यदि आप सुनिश्चित हैं कि मॉड्यूल वहाँ है, तो पैकर को पुनः आरंभ करने का प्रयास करें।

जाहिर है कि यह एक आकस्मिक उदाहरण है, लेकिन गतिशील छवि नाम महत्वपूर्ण हैं। क्या प्रतिक्रियाशील मूल गतिशील छवि नामों का समर्थन नहीं करता है?

Comments

मुझे Vue के साथ इसी तरह की समस्या का सामना करना पड़ा, जवाब यहाँ है stackoverflow.com/questions/40491506/…

— Alonad

Answer 1

यह " स्टेटिक रिसोर्सेज " सेक्शन के तहत प्रलेखन में शामिल है :

बंडल में एक छवि को संदर्भित करने का एकमात्र स्वीकृत तरीका स्रोत में शाब्दिक रूप से आवश्यकता ('छवि का नाम-की-संपत्ति') लिखना है।

// GOOD
<Image source={require('image!my-icon')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('image!' + icon)} />

// GOOD
var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');
<Image source={icon} />

हालाँकि आपको अपने चित्रों को Xcode में अपने ऐप में एक xcassets बंडल में जोड़ने के लिए याद रखना होगा, हालांकि यह आपकी टिप्पणी से लगता है कि आपने पहले ही ऐसा कर लिया है।

http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets

Comments

मुझे चित्र कहां जोड़े जाने चाहिए, मैं एंड्रॉइड के लिए मूल निवासी का उपयोग कर रहा हूं, जो कि ड्रॉएबल फ़ोल्डर में है?

— coderzzz18

उपरोक्त लिंक गलत है, लेख अब facebook.github.io/react-native/docs/images.html पर है

— app_sciences

नमस्ते, अगर मुझे सैकड़ों छवियों की आवश्यकता है, तो कैसे करें?

— चंजियनी

@chanjianyi मैं उसी स्थिति में हूं :-(

— मो

"आवश्यकता" मेरे लिए IOS उपकरणों पर काम नहीं कर रही है। कोई भी विचारधारा क्यों?

— आर्थर मेदिरोस

Answer 2

यह मेरे लिए काम किया:

मैंने एक कस्टम इमेज कंपोनेंट बनाया है जो बूलियन में यह जांचने के लिए लेता है कि इमेज वेब से है या किसी लोकल फोल्डर से पास की जा रही है।

// In index.ios.js after importing the component
<CustomImage fromWeb={false} imageName={require('./images/logo.png')}/>

// In CustomImage.js which is my image component
<Image style={styles.image} source={this.props.imageName} />

यदि आप इनमें से किसी एक का उपयोग करने के बजाय कोड देखते हैं:

// NOTE: Neither of these will work
source={require('../images/'+imageName)} 
var imageName = require('../images/'+imageName)

मैं सिर्फ require('./images/logo.png')एक प्रस्ताव के रूप में पूरे भेज रहा हूँ । यह काम करता हैं!

Comments

यह उत्तर अधिक श्रेय का हकदार है। यह पूरी तरह से काम करता है जब आप आवश्यकता बयान की घोषणा करते हैं और एक प्रस्ताव के रूप में पारित करते हैं। आपकी सरल व्याख्या के लिए बहुत-बहुत धन्यवाद, मैं केवल इतना चाहता हूं कि अन्य लोग भी स्पष्ट हों।

— dazziola

प्रॉप चीज़ काम चमत्कार करती है। यह आधिकारिक डॉक्स पर कहा जाना चाहिए।

— दशमीको

class CustomImage extends Component { constructor(props) { super(props); } render() { return ( <Image source={this.props.imageName} resizeMode="contain" style={{ height: 24, width: 24 }} /> ); } } <CustomImage fromWeb={false} imageName={require(`../../images/phone-${item.status}.png`)} />

— पाब्लो

माता-पिता के घटक में मेरे पास है <CustomImage fromWeb={false} imageName={require(../../assets/icons/$आईडीel.imgarios.png )} /> और इस बच्चे के घटक मेंclass CustomImage extends Component { constructor(props) { super(props); } render() { return ( <Image source={this.props.imageName} resizeMode="contain" style={{ height: 24, width: 24 }} /> ); } }

— वाल्टर मोनेके

शुद्ध प्रतिभा, यह वही है जो मैं खोज रहा था :)

— सुमित साहू

Answer 3

यदि आप जानते हैं कि इमेजेज (यूआरएल):

जिस तरह से मैंने इस समस्या के माध्यम से अपना रास्ता हैक किया:

मैंने एक ऑब्जेक्ट के साथ एक फ़ाइल बनाई जो छवि और छवि के नाम को संग्रहीत करती है:

const images = {
  dog: {
    imgName: 'Dog', 
    uri: require('path/to/local/image')
  },
  cat: {
    imgName: 'Cat on a Boat', 
    uri: require('path/to/local/image')
  }
}

export { images };

फिर मैंने उस ऑब्जेक्ट को उस कंपोनेंट में इम्पोर्ट किया, जहां मैं उसका इस्तेमाल करना चाहता हूं और बस अपना सशर्त रेंडरिंग करना चाहता हूं:

import { images } from 'relative/path';

if (cond === 'cat') {
  let imgSource = images.cat.uri;
}

<Image source={imgSource} />

मुझे पता है कि यह सबसे कुशल तरीका नहीं है, लेकिन यह निश्चित रूप से एक समाधान है।

आशा करता हूँ की ये काम करेगा!

Comments

छवियों का एक ज्ञात सेट संभालने के लिए नीट समाधान

— Tedy Kanjirathinkal

@TedyKanjirathinkal मुझे खुशी है कि इसने मदद की!

— वाल्टर मोनेके

धन्यवाद, यह उपयोगी होगा

— Truca

@WalterMonecke: अगर हम इस तरह करते हैं तो पूर्णांक मान मिल रहा है

— sabir

Answer 4

यदि आप उदाहरण के लिए अपनी छवियों और विवरणों के JSON सरणी के माध्यम से लूप करके एक सूची बनाने का तरीका खोज रहे हैं, तो यह आपके लिए काम करेगा।

1. एक फ़ाइल बनाएं (हमारे JSON डेटाबेस को रखने के लिए) जैसे ProfilesDB.js:

const Profiles=[
	  {
	  "id" : "1",
	  "name" : "Peter Parker",
	  "src" : require('../images/user1.png'),
	  "age":"70",
	},
	{
	"id" : "2",
	"name" : "Barack Obama",
	"src" : require('../images/user2.png'),
	"age":"19",
	},
	{
	"id" : "3",
	"name" : "Hilary Clinton",
	"src" : require('../images/user3.png'),
	"age":"50",
	}
]
export default Profiles;

2. फिर एक फ्लैटलिस्ट का उपयोग करके सूची के माध्यम से हमारे घटक और लूप में डेटा आयात करें:

import Profiles from './ProfilesDB.js';

<FlatList
  data={Profiles}
  keyExtractor={(item, index) => item.id}
  renderItem={({item}) => (
    <View>
      <Image source={item.src} />
      <Text>{item.name}</Text>
    </View>
  )}
/>

सौभाग्य!

Comments

धन्यवाद, यह मेरे लिए बहुत हताशा के बाद काम किया!

— चेरुकोल

Answer 5

जैसा कि रिएक्ट नेटिव डॉक्यूमेंटेशन कहता है , आपके बंडल को संकलित करने से पहले आपके सभी चित्र स्रोतों को लोड करना होगा

तो एक और तरीका है कि आप गतिशील छवियों का उपयोग कर सकते हैं यह एक स्विच स्टेटमेंट का उपयोग कर रहा है। मान लीजिए कि आप एक अलग चरित्र के लिए एक अलग अवतार प्रदर्शित करना चाहते हैं, आप कुछ इस तरह कर सकते हैं:

class App extends Component {
  state = { avatar: "" }

  get avatarImage() {
    switch (this.state.avatar) {
      case "spiderman":
        return require('./spiderman.png');
      case "batman":
        return require('./batman.png');
      case "hulk":
        return require('./hulk.png');
      default:
        return require('./no-image.png');
    }
  }

  render() {
    return <Image source={this.avatarImage} />
  }
}

स्नैक की जाँच करें: https://snack.expo.io/@abranhe/dynamic-images

यह भी याद रखें कि यदि आपकी छवि ऑनलाइन है तो आपको कोई समस्या नहीं है, आप कर सकते हैं:

let superhero = "spiderman";

<Image source={{ uri: `https://some-website.online/${superhero}.png` }} />

Answer 6

सबसे पहले, आवश्यक छवि के साथ एक फ़ाइल बनाएं - प्रतिक्रियाशील मूल छवियों को इस तरह से लोड किया जाना चाहिए।

संपत्ति / index.js

export const friendsandfoe = require('./friends-and-foe.png'); 
export const lifeanddeath = require('./life-and-death.png'); 
export const homeandgarden = require('./home-and-garden.png');

अब अपनी सभी संपत्तियों को आयात करें

App.js

import * as All  from '../../assets';

अब आप अपनी छवि को एक प्रक्षेपित मान के रूप में उपयोग कर सकते हैं, जहां imageValue (बैकएंड से आ रहा है) स्थानीय फ़ाइल नाम के समान है: 'homeandgarden':

<Image style={styles.image} source={All[`${imageValue}`]}></Image>

Comments

अच्छा समाधान, इसने मेरी बहुत मदद की! टी.के.एस।

— फ्रायला- क्रिस्टियन मारुची

कोई चिंता नहीं! यहाँ पर एक अच्छा समाधान नहीं मिल सका इसलिए मेरे अपने एक के साथ आया :) मदद करने के लिए खुशी है।

— हन्नाहर्नी

Answer 7

यहाँ महत्वपूर्ण हिस्सा: हम इस तरह की आवश्यकता [(आइटम '+ वायलैबल +'। Png) के अंदर की छवि का नाम नहीं रख सकते।

चरण 1: हम छवि गुणों के निम्नलिखित संग्रह के साथ एक ImageCollection.js फ़ाइल बनाते हैं

ImageCollection.js
================================
export default images={
    "1": require("./item1.png"),
    "2": require("./item2.png"),
    "3": require("./item3.png"),
    "4": require("./item4.png"),
    "5": require("./item5.png")
}

चरण 2: अपने ऐप में छवि आयात करें और आवश्यकतानुसार हेरफेर करें

class ListRepoApp extends Component {

    renderItem = ({item }) => (
        <View style={styles.item}>
            <Text>Item number :{item}</Text>
            <Image source={Images[item]}/>
        </View>
    );

    render () {
        const data = ["1","2","3","4","5"]
        return (
            <FlatList data={data} renderItem={this.renderItem}/>
        )
    }
}

export default ListRepoApp;

आप एक विस्तृत विवरण चाहते हैं तो आप नीचे दिए गए लिंक पर जाएँ का पालन कर सकता है https://www.thelearninguy.com/react-native-require-image-using-dynamic-names

सौजन्य: https://www.thelearninguy.com

Answer 8

import React, { Component } from 'react';
import { Image } from 'react-native';

class Images extends Component {
  constructor(props) {
    super(props);
    this.state = {
           images: {
                './assets/RetailerLogo/1.jpg': require('../../../assets/RetailerLogo/1.jpg'),
                './assets/RetailerLogo/2.jpg': require('../../../assets/RetailerLogo/2.jpg'),
                './assets/RetailerLogo/3.jpg': require('../../../assets/RetailerLogo/3.jpg')
            }
    }
  }

  render() {
    const {  images } = this.state 
    return (
      <View>
        <Image
                            resizeMode="contain"
                            source={ images['assets/RetailerLogo/1.jpg'] }
                            style={styles.itemImg}
                        />
     </View>
  )}
}

Answer 9

आप उपयोग कर सकते हैं

<Image source={{uri: 'imagename'}} style={{width: 40, height: 40}} />

छवि दिखाने के लिए।

से:

https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources

Answer 10

आवश्यकता का उपयोग करके गतिशील छवि के लिए

this.state={
       //defualt image
       newimage: require('../../../src/assets/group/kids_room3.png'),
       randomImages=[
         {
            image:require('../../../src/assets/group/kids_room1.png')
          },
         {
            image:require('../../../src/assets/group/kids_room2.png')
          }
        ,
         {
            image:require('../../../src/assets/group/kids_room3.png')
          }
        
        
        ]

}

जब बटन दबाएं- (मैं छवि यादृच्छिक संख्या betwenn का चयन करें 0-2))

let setImage=>(){
//set new dynamic image 
this.setState({newimage:this.state.randomImages[Math.floor(Math.random() * 3)];
})
}

राय

<Image
        style={{  width: 30, height: 30 ,zIndex: 500 }}
        
        source={this.state.newimage}
      />

Answer 11

मुझे पता है कि यह पुराना है, लेकिन मैं इसे यहां जोड़ने जा रहा हूं क्योंकि मैंने इस सवाल का हल खोज लिया है। डॉक्स एक uri के लिए अनुमति देते हैं: 'नेटवर्क इमेज'

https://facebook.github.io/react-native/docs/images#network-images

मेरे लिए मुझे इसके साथ गतिशील रूप से काम करने वाली छवियां मिलीं

<Image source={{uri: image}} />

Answer 12

 <StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput> 

<Image
            source={this.props.imgUri}
            style={{
              height: 30,
              width: 30,
              resizeMode: 'contain',
            }}
          />   

मेरे मामले में मैंने बहुत कोशिश की, लेकिन आखिरकार यह स्टाइलडइनप्यूट के अंदर स्टाइलड इंप्यूट घटक नाम की छवि पर काम करता है यदि आप अभी भी मुझे नहीं जानते हैं तो मुझे बताएं

Answer 13

यदि आपके पास कोई ऐसा एप्लिकेशन है, जिसमें मेरी जैसी ही कार्यक्षमता हो, कहो। जहां आपका ऐप ज्यादातर ऑफलाइन है और आप एक के बाद एक इमेज को रेंडर करना चाहते हैं। फिर नीचे दृष्टिकोण है कि मेरे लिए रिएक्ट नेटिव संस्करण 0.60 में काम किया है।

1. सबसे पहले रिसोर्स / इमेज नाम का फोल्डर बनाएं और अपनी सभी इमेज को वहां रखें।
2. अब Index.js (रिसोर्स / इमेजेज) नाम की एक फाइल बनाएं, जो कि सभी इमेजेस को रिओर्स / इमेज फोल्डर में इंडेक्स करने के लिए जिम्मेदार है ।

const Images = {'image1': आवश्यकता ('./ 1.png'), 'image2': आवश्यकता ('./ 2.png'), 'image3': आवश्यकता ('./ 3.png')}

3. अब अपनी पसंद के फ़ोल्डर में ImageView नाम का एक कंपोनेंट बनाएं। एक कार्यात्मक, वर्ग या निरंतर घटक बना सकता है। मैंने कॉन्स्ट कंपोनेंट का इस्तेमाल किया है। यह फ़ाइल अनुक्रमणिका के आधार पर छवि को लौटाने के लिए जिम्मेदार है।

import React from 'react';
import { Image, Dimensions } from 'react-native';
import Images from './Index';
const ImageView = ({ index }) => {
    return (
        <Image
            source={Images['image' + index]}
        />
    )
}
export default ImageView;

4. अब घटक से जहाँ भी आप स्टैटिक इमेज को गतिशील रूप से प्रस्तुत करना चाहते हैं, बस ImageView घटक का उपयोग करें और इंडेक्स को पास करें।

   <ImageView इंडेक्स = {this.qno + 1} />

Answer 14

आपको उसके लिए एक ऑब्जेक्ट का उपयोग करना चाहिए।

उदाहरण के लिए, मान लें कि मैंने एपीआई के लिए एक AJAX अनुरोध किया है और यह एक छवि लिंक देता है जिसे मैं राज्य के रूप में सहेजूंगा imageLink:

source={{uri: this.state.imageLink}}

Comments

डायनामिक इमेज पाथ लिंक्स के लिए, यह काम नहीं करता: var img = "../img/icons/"+img_name+"_selected.png"; <br/> <Image source={{uri: img}} resizeMode={'contain'} />

— रॉबर्ट टॉमस जी IV

इसके लिए एक हैक, अगर आपको पता है कि सभी img_name वेरिएंट इस तरह से जाएंगे:var images = { 'first': require('../first.png'), 'second': require('../second.png') } <Image source={{uri:images[img_name]}} resizeMode={'contain'} />

— गेब्रियल

कृपया चेतावनी दी है कि @GabrielLupu के सुझाव के लिए: आप इस तरह से सभी छवियों को स्मृति में आवंटित कर रहे हैं। यह छवियों की संख्या और उनके आकारों पर निर्भर करता है, हालांकि आपको संभवतः मेमोरी त्रुटियों से अनुभव होगा।

— लशाए