我遇到了麻烦,我想为电影票创建实时座位,但是当我为座位状况映射图像时,图像没有呈现。当我通过刷新页面打开页面时,图像呈现,但是当我移动到具有带有 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>
答案 0 :(得分:0)
您不能在 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' />
确保图像路径正确,具体取决于您的项目文件夹结构。