React+Django网站如何展示Azure Blob存储中关联花瓶的图片

前端问题 #

• 变量作用域错误：plateRef是自定义函数getImg内部的state变量，外部的images数组无法访问该作用域内的变量，所以直接返回undefined。
• 逻辑割裂：你写的getImg逻辑和Gallery组件完全独立，Gallery初始化轮播项的时候根本没有用到请求返回的plate数据。
• 单图取值问题：接口返回的是当前花瓶对应的所有plate列表，你代码中仅取了res.data[0]，就算逻辑正常也只能展示第一张图片，不符合多图需求。
• useEffect依赖缺失：useEffect的依赖数组为空，当页面vaseRef参数变化时，不会重新请求对应图片数据。

后端问题 #

• 多对多过滤语法不严谨：Plate和Vase为多对多关联，标准Django查询语法应为filter(vase__vaseRef=vase)，如果你的多对多关联字段名没有特殊设置，当前写法可能存在隐式问题。

import { useState, useEffect } from 'react';
import axios from 'axios';
import AliceCarousel from 'react-alice-carousel';
import 'react-alice-carousel/lib/alice-carousel.css';
import { Wrapper, FormDiv } from './你的样式文件路径';

const Gallery = () => {
  const [plateList, setPlateList] = useState([]);
  const urlParams = new URLSearchParams(window.location.search);
  const vaseRef = urlParams.get('vaseRef');

  // 统一处理数据请求
  useEffect(() => {
    if (!vaseRef) return;
    axios.get(`http://127.0.0.1:8000/api/getplate/?vase=${vaseRef}`)
      .then(res => {
        // 取出所有返回的plateRef
        const plates = res.data.map(item => item.plateRef);
        setPlateList(plates);
      })
      .catch(err => console.log(err))
  }, [vaseRef]); // 加入vaseRef作为依赖，参数变化时自动重新请求

  // 动态生成轮播项
  const galleryItems = plateList.map(plateRef => (
    <Wrapper>
      <img 
        src={`https://trendallplates.blob.core.windows.net/images/${plateRef}.png`}
        alt={`花瓶${vaseRef}配图`}
        width="500px"
        height="auto"
        onError={(e) => e.target.src = '/默认占位图路径.png'}
      />
    </Wrapper>
  ));

  const responsive = {
    0: { items: 1 },
    1024: { items: 1 }
  };

  const onSlideChange = (e) => {
    console.debug("切换中项位置: ", e.item);
    console.debug("切换中滑块位置: ", e.slide);
  };

  const onSlideChanged = (e) => {
    console.debug("切换完成项位置: ", e.item);
    console.debug("切换完成滑块位置: ", e.slide);
  };

  return (
    <FormDiv>
      <div className="img-gallery">
        {plateList.length === 0 ? (
          <p>当前花瓶暂无配图</p>
        ) : (
          <AliceCarousel
            items={galleryItems}
            responsive={responsive}
            autoPlayInterval={2000}
            autoPlayDirection="ltr"
            autoPlay={false}
            fadeOutAnimation={true}
            playButtonEnabled={false}
            disableAutoPlayOnAction={true}
            onSlideChange={onSlideChange}
            onSlideChanged={onSlideChanged}
          />
        )}
      </div>
    </FormDiv>
  );
};

export default Gallery;

• 私有存储+签名访问：将Azure Blob Storage容器设为私有，后端返回图片URL时生成带过期时间的SAS签名，避免图片被未授权爬取，保障存储资源安全。
• CDN加速：给Blob Storage绑定CDN服务，用户访问图片时就近取CDN节点缓存，降低源站带宽压力，提高加载速度。
• 多尺寸适配：上传图片时自动生成不同规格的缩略图，列表页加载小尺寸图，详情页加载原图，减少不必要的带宽消耗。
• 懒加载配置：给图片加上懒加载属性，轮播到对应位置时再加载对应图片，降低首屏资源加载量。

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