React中使用useContext从Data.js导入本地图片无法显示问题

核心问题点 #

• 1. Data.js中image字段格式错误：你将导入的图片变量用额外大括号包裹，使得image的值为{iphone: 图片路径}的对象，而img标签的src属性仅接受字符串类型的路径，直接传对象会导致加载失败
• 2. Context上下文使用流程不完整：你仅声明了Iimage上下文，但没有通过Iimage.Provider为子组件传递实际的图片值，useContext读取到的是上下文默认的空值

分步修改代码 #

1. 修改Data.js代码 #

import iphone from '../Images/iphone.png';
const Data = [
    {
        name:"Apple iphone 12",
        price:'$999',
        colour: 'red',
        item: '1',
        // 去掉image值的大括号，直接存导入的图片路径字符串
        image: iphone
        // image:"https://m.media-amazon.com/images/I/71+17bVYHxL._SX522_.jpg"     
    }
]
export default Data;

2. 补全Context传递逻辑（以在Card组件中处理为例） #

修改Card.js代码，引入Data并添加Provider传递上下文值：

import React,{createContext} from 'react'
import '../Components/Card.css'
import CardInfo from './CardInfo';
import CardImage from './CardImage';
// 引入Data文件
import Data from "./Data";
// 确认Iimage上下文是在这里创建的，如果是在App.js创建则直接引入即可
export const Iimage = createContext('');

const Card = (props) =>{
    // 取第一个商品的图片作为示例，可根据实际需求取对应下标的商品图片
    const currentImage = Data[0].image;
    return(
        <>
        {/* 用Provider包裹子组件，传递图片值 */}
        <Iimage.Provider value={currentImage}>
        <div className="col-12 col-md-4 col-lg-4">
        <div className="row">
        <div className="col extra-mob-align">
            <CardImage />
        </div>
        <CardInfo />
      </div>
    </div>
        </Iimage.Provider>
        </>
    );
}
export default Card;

如果需要渲染多个商品卡片，可在遍历Data数组生成Card组件时，将对应商品的image值传给Provider即可

3. 调整CardImage组件的引入路径即可 #

import React,{useContext} from 'react'
// 从Card.js引入Iimage，如果你是在App.js创建则对应调整引入路径
import { Iimage } from './Card';

function CardImage(props) {
    const contextimage = useContext(Iimage)
    return (
        <div>
          <img src={contextimage} alt="iphone" style={{width:"150px" , height:"174px"}} />        
        </div>
    )
}
export default CardImage

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