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

d7v8vwbk 于 2023-02-05 发布在 React

关注(0)|答案(2)|浏览(113)

我想在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'）}〉，它就可以工作。

react-native

来源：https://stackoverflow.com/questions/75346149/reading-image-from-src-assets-folder-at-runtime-using-props-in-react

2条答案

按热度按时间

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

赞(0）回复(0）举报 2023-02-05

nle07wnf2#

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

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

然后在组件中：

<img src={props.value}>

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

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

赞(0）回复(0）举报 2023-02-05

我来回答

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

2条答案

相关问题

热门标签

最新问答