React项目中如何从多链接JSON获取图片？jpeg_url/file_url选哪个？

1. 多链接并行获取数据 #

把需要请求的所有JSON链接存入数组，用Promise.all批量发起请求，合并所有返回的图片数据到一个数组中，实现多来源内容加载。

修改后的Home组件代码：

import { useState, useEffect } from 'react';
import './Home.css';
import ImagesList from './ImagesList';

const Home = () => {
    const [images, setImages] = useState([]);
    // 在这里添加所有需要请求的链接
    const dataUrls = [
        'http://localhost:8000/0',
        'http://localhost:8000/1',
        'http://localhost:8000/2'
        // 可继续追加更多链接
    ];

    useEffect(() => {
        // 批量请求并合并数据
        Promise.all(dataUrls.map(url => fetch(url).then(res => res.json())))
            .then(allData => {
                const mergedImages = allData.flat();
                console.log('合并后的图片数据:', mergedImages);
                setImages(mergedImages);
            })
            .catch(error => console.error('加载数据失败:', error));
    }, []);

    return (
        <div className="side-content">
            <ImagesList images={images} title="图片搜索结果" />
        </div>
    );
};

export default Home;

2. 图片URL兼容处理 #

不确定jpeg_url和file_url哪个可用时，做兼容判断：优先使用jpeg_url，不存在则 fallback 到file_url，同时打印日志确认字段有效性。

修改后的ImagesList组件：

import './ImagesList.css';

const ImageList = ({ images, title }) => {
    return (
        <div className="image-container">
            <h3>{title}</h3>
            <div className="image-flex-grid">
                {images.map((image, index) => {
                    // 兼容两种图片URL字段
                    const imageUrl = image.jpeg_url || image.file_url;
                    // 打印日志确认当前使用的URL
                    console.log(`图片${index}使用的URL:`, imageUrl);
                    // 优先用image.id作为key（如果JSON有唯一ID字段），无则用index
                    return (
                        <div key={image.id || index} className="image-card">
                            <div className="image-wrapper">
                                <img 
                                    src={imageUrl} 
                                    alt={image.title || `图片${index}`} 
                                    loading="lazy"
                                />
                            </div>
                            <div className="image-title" style={{ color: image.titleColor || '#333' }}>
                                {image.title || '无标题'}
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};

export default ImageList;

3. Flex布局实现搜索结果样式 #

修改ImagesList.css，用Flexbox实现流式卡片布局，贴合搜索结果的视觉风格，支持响应式适配：

.image-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.image-flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
}

.image-card {
    flex: 1 1 200px; /* 最小宽度200px，自动填充剩余空间 */
    max-width: 250px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.image-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.image-wrapper {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

.image-title {
    padding: 10px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

以上修改完成后，可实现：

• 从多个链接加载并合并图片数据
• 自动适配可用的图片URL字段
• 流式卡片布局的搜索结果样式，支持响应式，hover有交互反馈，图片比例统一

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