Question

Ionic 4中图像资产的最佳做法是什么？

我必须在哪里放置图片，使用这些图片的正确路径是什么？

Answer 1

将图片放在

async onChangeDestination(destination) {
this.setState({ destination });
const apiUrl = `https://maps.googleapis.com/maps/api/place/autocomplete/json?key=${apiKey}
  &input=${destination}&location=${this.state.focusedLocation.latitude}, 
  ${this.state.focusedLocation.longitude
}&radius=2000`;
try {
  const result = await fetch(apiUrl);
  const json = await result.json();
  console.log(json);
  this.setState({
    predictions: json.predictions
  });
} catch (err) {
  console.log(err)
}
}

render() {
//For Prediction
const predictions = this.state.predictions.map(prediction => (
  <Text key={prediction.id} style={styles.descriptionText}>{prediction.description}</Text>
));
//For Marker
let marker = null;
if(this.state.locationChosen) {
  marker = <MapView.Marker coordinate={this.state.markerPosition}/>
}
return(
  <View style={styles.container}>
    {/* <StatusBar backgroundColor={'transparent'} translucent={true}/> */}
    <MapView
      style={styles.map}
      initialRegion={this.state.focusedLocation}
      onPress={this.pickLocationHandler}
      showsUserLocation={true}
      ref={ref => this.map = ref} //For animating map movement
    >
      {marker}
    </MapView>
    {/* <TouchableOpacity onPress={this.getLocationHandler} style={styles.iconContainer}>
      <Icon name="md-locate" size={30} color="blue"/>
    </TouchableOpacity> */}
    <TextInput 
      placeholder="Search for an event or place!"
      style={styles.destinationInput}
      onChangeText={destination => {
        this.setState({destination});
        this.onChangeDestinationDebounced(destination)
      }}
      value={this.state.destination}
    />
    {this.state.predictions && this.state.predictions.length > 0 && (
       <View style={styles.descriptionContainer}>{predictions}</View>
    )}
  </View>
);
} 

const styles = StyleSheet.create({
container: {
  zIndex: -1,
  alignItems: 'center',
},
map: {
  height: '100%',
  width: '100%'
},
iconContainer: {
  position: 'absolute',
  top: 60,
  right: 15,
  zIndex: 1
},
destinationInput: {
  position: 'absolute',
  zIndex: 10,
  width: '97%',
  top: 15,
  backgroundColor: 'white',
  borderRadius: 8,
  padding: 8
},
descriptionText: {
  color: 'black',
},
descriptionContainer: {
  zIndex: 2,
  position: 'absolute',
  top: 20,
  height: Dimensions.get('window').height,
  width: Dimensions.get('window').width,
}
})

文件夹，然后将这些图像用作：

src/assets/img

在Ionic 4中使用图像资产的正确方法是什么

1 个答案: