React Native本地图片显示异常：返回整数致URL转换失败

这个问题我之前也碰到过，本质是搞混了React Native中Image组件source属性的两种合法格式，我来帮你理清楚：

为什么你的写法会报错？ #

React Native里require('./my-icon.png')返回的是一个数字类型的资源ID（RN内部用来标识本地静态资源的编号），而{uri: ...}里的uri字段要求的是字符串类型的网络/本地文件路径。

当article.urlToImage为空时，你的代码相当于把require("./awaiting.png")返回的数字赋值给了uri，RN会尝试把这个数字当成URL去解析，自然就会抛出错误：'JSON value of '1' of type NSNumber cannot be converted to a valid URL'。

正确的解决方案 #

方案1：直接用条件判断切换source格式 #

这是最直观也最推荐的写法，根据urlToImage是否存在，直接切换source的格式：

<Image 
  source={article.urlToImage ? { uri: article.urlToImage } : require("./awaiting.png")}
  // 记得加上width和height，否则图片可能不显示
  style={{ width: 200, height: 150 }}
/>

这种写法符合RN的静态资源解析规则，require的路径是固定字符串，打包时会被正确识别。

方案2：提前定义占位图变量（适合复用场景） #

如果这个占位图在多个地方用到，可以提前把它的资源ID存成变量，再在条件中使用：

// 组件外部或内部顶部定义
const placeholderImage = require("./awaiting.png");

// 渲染时使用
<Image 
  source={article.urlToImage ? { uri: article.urlToImage } : placeholderImage}
  style={{ width: 200, height: 150 }}
/>

额外注意点 #

• 本地图片的require路径必须是静态字符串，不能用变量拼接（比如require(./${imageName}.png)这种写法会报错），RN需要在打包时提前解析所有静态资源。
• 不管用哪种格式，记得给Image组件设置明确的width和height样式，否则图片可能无法正常显示。

内容的提问来源于stack exchange，提问作者L-R