有没有办法将本地图像发送到组件函数？

Posted 2023-03-14

【中文标题】有没有办法将本地图像发送到组件函数？

【英文标题】：Is there a way to send local images to a component function?

【发布时间】：2020-06-28 23:24:05

【问题描述】：

我想将一系列本地图像文件发送到一个组件，以便它们可以被渲染。 在图像来自本地存储的情况下，我还没有找到任何方法。我只在图像具有在线链接的情况下看到它，并且这些链接存储在一个对象中，然后从中提取它们。 有没有办法可以在一个对象中存储多个位置，然后将其发送到组件？

Product.Component.js

const Product = ( image ) => 
    return (
        <View style=styles.container>
            <Text></Text>
            <View>
                <Image
                    style= width: 225, height: 225 
                    source=image
                />
            </View>
            <View style=styles.button>

            </View>
        </View>

    )

App.js

import Product from './components/Product.Component'
import Image from 'react-native';


export default class App extends React.Component 

render() 


    return (
      <Container style=styles.container >

        <Product 

          style= width: 225, height: 225  
          <Image source=require('./assets/images/logo/myimage.png')/>
        />
      </Container >
    );

【参考方案1】：

import MyImage from './assets/images/logo/myimage.png'

<Image source=MyImage/>

【讨论】：

``` import MyImage from './assets/images/logo/myimage.png' /> ``` 它说类型参数只能是用于 TypeScript files.ts(8011)

我认为你的 jsx 是错误的，你把 Image 作为 Product 的道具，应该是 <Product style=> <Image/> </Product>

我刚刚又看了一遍你的代码，图片确实是Product的道具，那么应该是<Product style= image=MyImage/>

另外，你可以从 Product 组件中移除 style 属性，因为你没有在任何地方使用它

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review