在运行时使用React中的props从src/assets文件夹阅读图像

d7v8vwbk  于 2023-02-05  发布在  React
关注(0)|答案(2)|浏览(114)

我想在React中随机显示图像。图像放在src/assets文件夹中。
我得用 prop 来展示它们。
Row.js:

import React from 'react'
import {View, Text } from 'react-native';
const Row = (props) => (
   
    <View style={{flex:1, flexDirection: 'row'}}>
       <img src={require(props.value)}> //Error: Cannot find module '../assets/icondelivery.PNG'
      
       </img>
       <Text>{props.value}</Text>
  </View>
)

export default Row

属性值包含:../assets/icondelivery.PNG
层次结构为:src/assets/icondelivery.PNG

注意:如果我传递〈img src={require('../assets/icondelivery.PNG')}〉,它就可以工作。

lrpiutwd

lrpiutwd1#

将资源文件夹放在公用文件夹中。将路径从../assets/icondelivery.PNG更改为./assets/icondelivery.PNG使用此代码:

import React from 'react'
import {View, Text } from 'react-native';
const Row = (props) => (
  <View style={{flex:1, flexDirection: 'row'}}>
    <img src={process.env.PUBLIC_URL + props.value}/>
    <Text>{props.value }</Text> 
  </View>
)

export default Row
nle07wnf

nle07wnf2#

对于已知的动态图像源,您可以在定义中使用require(),而不是在img src本身中使用。
例如

<Row value={require('../assets/icondelivery.PNG')} />

然后在组件中:

<img src={props.value}>

如果你有一个像数组一样包含图像的结构,你可以把require()放在那里:

const images = [
    { name: 'delivery', src: requiure('../assets/icondelivery.PNG')}
    ...
    ...
]

相关问题