时间戳

首页 > 解决方案 > 在反应中映射图像但不渲染

javascript - 在反应中映射图像但不渲染

问题描述

我有麻烦，我想为电影票创建实时座位，但是当我为座位条件映射我的图像时，图像没有渲染。当我通过刷新页面打开页面时，图像会呈现，但是当我移动到带有 this.props.history.push 座位图的页面时，座位图不会呈现。这是我的代码

这是座位组件：

function Index({id, key}) {
    const state = useSelector(state => state.movie)
    const [selected, setSelected] = useState(false)
    const [sold, setSold] = useState([])

    
    const handleSelect=(id)=>{
        if(selected){
            setSelected(false)
        }else{
            setSelected(true)
        }
        console.log(id);
    }
    console.log(state.movie);
    return (
        <div className="ord-icon-book">
            <div className="ord-icon-book-item"   name='seat'id={id} key={key}>
                <img src={'http://localhost:6400/image/Rectangle%20540.png'} alt="A4" name='A4' placeholder='seat'/>
            </div>
            <div className="ord-icon-book-item"  name='seat'id={id} key={key}>
                <img src={'http://localhost:6400/image/Rectangle%20443.png'} alt="A3" name='A3' />
            </div>

            {selected ?
            <div className="ord-icon-book-item"  id='selected' onClick={()=>handleSelect(id)} id={id} key={key}>
                <img src={'http://localhost:6400/image/Rectangle%20469.png'} alt="A1" name='A1' />
            </div> :
            <div className="ord-icon-book-item" id='available' onClick={()=>handleSelect(id)} id={id} key={key}>
                <img src={'http://localhost:6400/image/Rectangle%20438.png'} alt="A2" name='A2' />
            </div>
            }
        </div>
    )
}

export default Index

这是我映射组件的地方：

import Seats from './seats'


 componentDidMount(){
        let i;
     for(i=0; i< 14; i ++){
           this.state.seats.push(i)
        }
        let seat = document.getElementByClass
        console.log(this.state.seats);
    }

<div className="ord-spoting">
<div className="ord-spot-left">
    {this.state.seats.map((id, index)=>{
     return  <Seats id={id} key={index}/>
     })}
</div>
<div className="ord-spot-left">
    {this.state.seats.map((i,k)=>{
     <Seats /> 
    })}
</div>

标签： javascriptreactjs

解决方案

您不能在 react 中设置这样的图像，也不能在纯 html 中设置这样的图像。您想在纯 HTML 的情况下使用相对路径

像这样：

<img src='./image/Rectangle540.png' alt="A1" name='A1' />

由于您使用的是 React，因此您不能直接设置源。您必须先导入图像资产。

像这样：

import myRectancle from "./image/Rectangle540.png";

然后，在 JSX 中，像这样使用它：

<img src={myRectangle} alt="A1" name='A1' />

确保图像路径正确，具体取决于您的项目文件夹结构。

推荐阅读