为什么反应本机目前不需要图像？

Question

<Image source={require(rowData.avatar)} />

错误：未知名称模块'xxxxxx'

为什么可以打印出路径但无法读取图片？

Answer 1

尝试

  <Image source={(rowData.avatar)} />

Answer 2

图片无法使用动态生成的来源。假设您尝试做的是将图片作为包的一部分加载，您的代码必须是：

const avatar = require('./path/to/avatar.jpg');

只有这样，您才能使用avatar作为您的来源：

rowData = {
    avatar: avatar
}

<Image source={rowData.avatar} />

如果您事先了解应用程序中需要哪些图像，我建议您创建一个资产文件，在其中添加所有硬编码要求，例如：

// assets.js
return {
    avatar1: require('./path/to/file.jpg'),
    avatar2: require('./path/to/file.jpg'),
    avatar3: require('./path/to/file.jpg'),
}

然后你将构建你的rowData，如下所示：

import avatars from './assets';

rowData = {
    avatar: avatars['avatar1']
}

您可能会使用包含指向您感兴趣的头像的键的变量替换avatar1。

这是我用于其中一个项目的asset file。