Javascript 在react中映射图像，但不渲染

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

这是座椅组件：

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>

函数索引（{id，key}）{
const state=useSelector（state=>state.movie）
const[selected，setSelected]=useState（false）
const[sell，setSold]=useState（[]）
const handleSelect=（id）=>{
如果（选定）{
已选（假）
}否则{
已选择（正确）
}
console.log（id）；
}
console.log（state.movie）；
返回(
{被选中？
handleSelect（id）}id={id}key={key}>
:
handleSelect（id）}id={id}key={key}>
}
)
}
导出默认索引

这是我映射组件的地方：

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>

从“/Seats”导入座位
componentDidMount（）{
让我；
对于（i=0；i<14；i++）{
本.州.席位.推（一）
}
让seat=document.getElementByClass
console.log（this.state.seats）；
}
{this.state.seats.map（（id，index）=>{
返回
})}
{this.state.seats.map（（i，k）=>{
})}

您不能在react或纯html中设置这样的图像。如果是纯HTML，您希望使用相对路径

像这样：

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

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

像这样：

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

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

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

---

根据您的项目文件夹结构，确保图像路径正确。

感谢您回答@Jay Pillai，但它仍然不起作用，：/，图像仍然无法渲染。@ADWisnuPrasetio您能将代码发布到代码沙盒中吗？使用codesandbox.io。另外，在您的第一个代码段中，看起来您正在呈现一个索引组件，而不是Seats组件。您能在这里检查一下吗？请在这里查看一下。对于这个问题，我删除了很多不相关的代码，但它是有效的。确保正确设置样式，以便可以看到渲染图像和div。此外，请导入和导出正确的零部件。你从Seats.js导出'Index'，从这个文件导入Seats，这个文件不存在existoke，如果我想将图像乘以30，该怎么办？因为在我的代码中，我创建了一些图像到座位位置，并将其乘以98项，就像在我的代码中一样。我可以将图像推到数组中，并将其映射到页面吗？