如何在网页中实现特定地点的随机图片展示

<figure class="image-box">
    <img src="https://source.unsplash.com/random/300x300/?tajmahal,india" alt="泰姬陵">
    <figcaption>泰姬陵</figcaption>
</figure>

<figure class="image-box">
    <img src="https://source.unsplash.com/random/300x300/?statue-of-liberty,new-york" alt="自由女神像">
    <figcaption>自由女神像</figcaption>
</figure>

<figure class="image-box">
    <img src="https://source.unsplash.com/random/300x300/?eiffel-tower,paris" alt="埃菲尔铁塔">
    <figcaption>埃菲尔铁塔</figcaption>
</figure>

document.addEventListener('DOMContentLoaded', () => {
    const imageBoxes = document.querySelectorAll('.image-box');
    const locations = [
        { name: '泰姬陵', keywords: 'tajmahal,india' },
        { name: '自由女神像', keywords: 'statue-of-liberty,new-york' },
        { name: '埃菲尔铁塔', keywords: 'eiffel-tower,paris' },
        { name: '长城', keywords: 'great-wall,china' },
        { name: '悉尼歌剧院', keywords: 'sydney-opera-house,australia' }
    ];

    imageBoxes.forEach((box, index) => {
        if (locations[index]) {
            const img = box.querySelector('img');
            const figcaption = box.querySelector('figcaption');
            const location = locations[index];

            // 构建Unsplash随机图片URL
            const imageUrl = `https://source.unsplash.com/random/300x300/?${location.keywords}`;

            img.src = imageUrl;
            img.alt = location.name;
            figcaption.textContent = location.name;
        }
    });
});

// 请替换为您的API-Ninjas密钥
const API_KEY = 'YOUR_API_NINJAS_KEY'; 

async function getRandomImageByCategory(category) {
    try {
        const response = await fetch(`https://api.api-ninjas.com/v1/randomimage?category=${category}`, {
            headers: { 'X-Api-Key': API_KEY }
        });
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const blob = await response.blob(); // API-Ninjas直接返回图片二进制数据
        return URL.createObjectURL(blob); // 创建一个临时的URL
    } catch (error) {
        console.error('获取图片失败:', error);
        return null;
    }
}

document.addEventListener('DOMContentLoaded', async () => {
    const imageElements = document.querySelectorAll('.image-box img');
    const categories = ['city', 'nature', 'technology']; // 示例类别

    for (let i = 0; i < imageElements.length; i++) {
        const category = categories[i % categories.length]; // 循环使用类别
        const imageUrl = await getRandomImageByCategory(category);
        if (imageUrl) {
            imageElements[i].src = imageUrl;
            // 假设figcaption也需要更新
            const figcaption = imageElements[i].closest('.image-box').querySelector('figcaption');
            if (figcaption) {
                figcaption.textContent = `随机图片 (${category})`;
            }
        }
    }
});

<button id="refreshButton">刷新所有图片</button>
<div class="gallery">
    <!-- 您的图片框 -->
</div>

<script>
    document.getElementById('refreshButton').addEventListener('click', () => {
        // 重新执行上述的动态加载图片的JavaScript代码
        // 例如：
        const imageElements = document.querySelectorAll('.image-box img');
        imageElements.forEach(img => {
            const currentSrc = img.src;
            // 添加一个随机查询参数以强制浏览器重新加载
            img.src = currentSrc.split('?')[0] + '?' + new Date().getTime();
        });
    });
</script>

const customLocationImages = {
    '泰姬陵': [
        'path/to/tajmahal_1.jpg',
        'path/to/tajmahal_2.jpg',
        'path/to/tajmahal_3.jpg'
    ],
    '自由女神像': [
        'path/to/liberty_1.jpg',
        'path/to/liberty_2.jpg'
    ]
};

function getRandomCustomImage(locationName) {
    const images = customLocationImages[locationName];
    if (images && images.length > 0) {
        const randomIndex = Math.floor(Math.random() * images.length);
        return images[randomIndex];
    }
    return 'path/to/default_image.jpg'; // 提供一个默认图片
}

// 在您的图片框中使用
// const imgElement = document.getElementById('myTajMahalImage');
// imgElement.src = getRandomCustomImage('泰姬陵');

/* 现有样式 */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 保持图片之间的间隔 */
    gap: 20px; /* 使用gap属性代替margin-bottom */
}

.image-box {
    flex: 0 0 calc(33.33% - 20px); /* 3列布局，减去gap */
    max-width: calc(33.33% - 20px); /* 确保在小屏幕下也能良好显示 */
    height: 300px; /* 固定高度，或使用aspect-ratio */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保图片填充整个框并保持比例 */
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

.image-box:hover {
    transform: translateY(-5px) scale(1.02); /* 鼠标悬停效果 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.image-box:hover img {
    filter: grayscale(0%);
}

.image-box figcaption {
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    transition: opacity 0.5s ease;
}

.image-box:hover figcaption {
    opacity: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .image-box {
        flex: 0 0 calc(50% - 15px); /* 2列布局 */
        max-width: calc(50% - 15px);
    }
}

@media (max-width: 480px) {
    .image-box {
        flex: 0 0 100%; /* 1列布局 */
        max-width: 100%;
    }
}