React原生渲染图像

vfh0ocws 于 2023-03-09 发布在 React

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

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

const MyComponent = ({ item }) => {
  const imageSource = require(`./assets/${item}.png`);

  return (
    <View>
      <Image source={imageSource} />
    </View>
  );
};

export default MyComponent;

结果：

error: 
components\multipleProductsImageReader.tsx: 
components\multipleProductsImageReader.tsx:Invalid call at line 4: 
require("../assets/" + item + ".png")

如何在react-native中动态渲染图像？就像我上面的例子。

react-native

来源：https://stackoverflow.com/questions/75646645/react-native-render-an-image

2条答案

按热度按时间

new9mtju1#

尝试如下所示渲染图像：

<Image source={require(imageSource)} />

这将动态渲染图像。

赞(0）回复(0）举报 2023-03-09

7ivaypg92#

首先在控制台日志上打印项目结果，如果图像已有文件扩展名，则从所需文件（./assets/${item}.png）中删除.png;
注：-必须检查本地资产文件夹中是否存在动态项目图像路径。

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

const MyComponent = ({ item }) => {
  const imageSource = require(`./assets/${item}.png`); 
  return (
    <View>
      {imageSource && <Image source={imageSource} /> } // New Line
    </View>
  );
};

export default MyComponent;

赞(0）回复(0）举报 2023-03-09

我来回答

React原生渲染图像

2条答案

相关问题

热门标签

最新问答