React Native Image组件source报错 本地assets图片无法显示如何解决

你遇到的Image组件source属性报错，核心是传值结构不匹配：你之前写的icon = {image: require('../../../../assets/logos.jpg')}把require返回的资源标识套在了额外的image字段中，传入Image组件时source拿到的是{image: 资源id}的字典结构，和RN要求的source类型不匹配，才会触发类型转换错误。 #

正确操作步骤 #

1. 定义数据时直接赋值require返回值 #

require调用后会返回RN可直接识别的本地资源唯一标识，不需要额外嵌套对象，示例如下：

// 商家数据结构示例
const merchantList = [
  {
    id: 1,
    name: "川味火锅店",
    address: "成都市锦江区XX路12号",
    // 分类图标直接存require的返回值
    categoryIcon: require("../../../../assets/food_icon.png"),
    // 门店图同理
    storeCover: require("../../../../assets/store_1.jpg"),
    isOpen: true
  }
]

注意：require的路径必须是静态字符串，不能使用变量拼接，RN打包阶段会预处理所有本地资源，动态路径无法被识别打包。

2. 卡片组件内直接传入source属性 #

不管是原生Image组件还是styled-components封装的Image组件，直接把对应字段传给source即可：

import styled from 'styled-components/native'
// 封装样式
const CategoryIcon = styled.Image`
  width: 24px;
  height: 24px;
  margin-right: 8px;
`
const StoreCover = styled.Image`
  width: 100%;
  height: 120px;
  border-radius: 8px;
`
// FlatList渲染卡片时调用
const MerchantCard = ({ item }) => {
  return (
    <>
      <StoreCover source={item.storeCover} />
      <CategoryIcon source={item.categoryIcon} />
      {/* 其余字段渲染 */}
    </>
  )
}

网络Icon无法渲染问题排查 #

如果使用网络URL的图标无法显示，优先检查两点：

• 网络图片的source属性需要固定套uri字段，写法为source={{uri: '你的图标网络地址'}}，和本地资源的传值规则完全不同
• iOS端默认开启ATS限制，非HTTPS的图片地址会被拦截，需要在Info.plist中配置允许HTTP加载；安卓端需要确认已经在AndroidManifest.xml中申请了网络权限

多模块复用本地资源优化方案 #

如果同一张图片需要在多个模块调用，建议单独抽离资源管理文件统一导出，避免路径写错：

// src/assets/index.js 统一管理所有本地资源
export const ICON_FOOD = require('./icons/food.png')
export const ICON_SHOPPING = require('./icons/shopping.png')
export const DEFAULT_STORE_COVER = require('./images/default_store.png')

其他模块直接导入使用即可：

import { ICON_FOOD } from '../../assets'
const merchant = {
  categoryIcon: ICON_FOOD
}

内容的提问来源于stack exchange，提问作者Diana