63 lines
1.4 KiB
React
63 lines
1.4 KiB
React
|
import React from 'react';
|
||
|
|
|
||
|
|
export default function MovieCard({ imdbId }) {
|
||
|
|
const CARD_WIDTH = 190;
|
||
|
|
const CARD_HEIGHT = 330;
|
||
|
|
|
||
|
|
// 直接生成本地图片路径
|
||
|
|
const posterUrl = `/img/posters/${imdbId}.jpg`;
|
||
|
|
|
||
|
|
// 简单判断图片是否存在（通过 onError 回调处理）
|
||
|
|
const [hasError, setHasError] = React.useState(false);
|
||
|
|
|
||
|
|
if (hasError) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: CARD_WIDTH,
|
||
|
|
height: CARD_HEIGHT,
|
||
|
|
background: '#f8f8f8',
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
color: '#bbb',
|
||
|
|
fontSize: '12px',
|
||
|
|
flexShrink: 0,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
无海报
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<a
|
||
|
|
href={`https://www.imdb.com/title/${imdbId}/`}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
width: CARD_WIDTH,
|
||
|
|
height: CARD_HEIGHT,
|
||
|
|
textDecoration: 'none',
|
||
|
|
flexShrink: 0,
|
||
|
|
overflow: 'hidden',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={posterUrl}
|
||
|
|
alt="电影海报"
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
objectFit: 'scale-down',
|
||
|
|
display: 'block',
|
||
|
|
}}
|
||
|
|
onError={() => setHasError(true)}
|
||
|
|
/>
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
}
|