Question

我需要从目录中动态检索图像。图像的名称通过api来自数据库。如果我对在线图像进行硬编码，则可以正常工作，但是当我从db检索数据时不显示任何图像，而是显示错误消息：“未捕获（承诺）错误：初始化时DeltaPatcher应该收到基本捆绑包”这是我的码。

const image = require("../Images/" + U_dp);

 return(
  <CardItem>
          <Left>
            <Thumbnail source={require("../Images/" + U_dp)} />
            <Body>
              <Text>{U_name}</Text>
              <Text note>{agotime}</Text>
            </Body>
          </Left>
  </CardItem>
)

Answer 1

来自React Native v0.59：

require中的图片名称必须是静态已知的。

这意味着，如果将变量传递到require中的图像路径，则它不是静态路径，因此React Native无法正确渲染它。

根据您的问题：

我需要从目录中动态检索图像。和名字图片通过api来自数据库。

由于U_dp值是从api中检索到的，因此将不起作用。

Answer 2

const image = require(`../Images/${U_dp}`);

 return(
  <CardItem>
          <Left>
            <Thumbnail source={image} />
            <Body>
              <Text>{U_name}</Text>
              <Text note>{agotime}</Text>
            </Body>
          </Left>
  </CardItem>

我认为这可以为您提供帮助。我将此<Thumbnail source={require("../Images/" + U_dp)} />替换为<Thumbnail source={image} />。我也将您的图片常量更改为

const image = require(`../Images/${U_dp}`);

希望能为您提供帮助

无法在React Native中使用Require加载图像

2 个答案: