Material Tailwind React Carousel仅兼容Unsplash图，本地图无法加载求助

我在用Material Tailwind的React轮播组件，它能正常显示Unsplash的示例图片，但本地图片或其他非Unsplash的在线图片加载不出来。试过直接写相对路径./images/image1、../images/image1，也试过import导入这两种路径的图片，都没成功。组件代码如下：

import { Carousel, Typography, Button } from "@material-tailwind/react";
 
export function CarouselWithContent() {
  return (
    <Carousel className="rounded-xl">
      <div className="relative h-full w-full">
        <img
          src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80"
          alt="image 1"
          className="h-full w-full object-cover"
        />
        <div className="absolute inset-0 grid h-full w-full place-items-center bg-black/75">
          <div className="w-3/4 text-center md:w-2/4">
            <Typography
              variant="h1"
              color="white"
              className="mb-4 text-3xl md:text-4xl lg:text-5xl"
            >
              The Beauty of Nature
            </Typography>
            <Typography
              variant="lead"
              color="white"
              className="mb-12 opacity-80"
            >
              It is not so much for its beauty that the forest makes a claim
              upon men's hearts, as for that subtle something, that quality
              of air that emanation from old trees, that so wonderfully changes
              and renews a weary spirit.
            </Typography>
            <div className="flex justify-center gap-2">
              <Button size="lg" color="white">
                Explore
              </Button>
              <Button size="lg" color="white" variant="text">
                Gallery
              </Button>
            </div>
          </div>
        </div>
      </div>
      <div className="relative h-full w-full">
        <img
          src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
          alt="image 2"
          className="h-full w-full object-cover"
        />
        <div className="absolute inset-0 grid h-full w-full items-center bg-black/75">
          <div className="w-3/4 pl-12 md:w-2/4 md:pl-20 lg:pl-32">
            <Typography
              variant="h1"
              color="white"
              className="mb-4 text-3xl md:text-4xl lg:text-5xl"
            >
              The Beauty of Nature
            </Typography>
            <Typography
              variant="lead"
              color="white"
              className="mb-12 opacity-80"
            >
              It is not so much for its beauty that the forest makes a claim
              upon men's hearts, as for that subtle something, that quality
              of air that emanation from old trees, that so wonderfully changes
              and renews a weary spirit.
            </Typography>
            <div className="flex gap-2">
              <Button size="lg" color="white">
                Explore
              </Button>
              <Button size="lg" color="white" variant="text">
                Gallery
              </Button>
            </div>
          </div>
        </div>
      </div>
      <div className="relative h-full w-full">
        <img
          src="https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80"
          alt="image 3"
          className="h-full w-full object-cover"
        />
        <div className="absolute inset-0 grid h-full w-full items-end bg-black/75">
          <div className="w-3/4 pl-12 pb-12 md:w-2/4 md:pl-20 md:pb-20 lg:pl-32 lg:pb-32">
            <Typography
              variant="h1"
              color="white"
              className="mb-4 text-3xl md:text-4xl lg:text-5xl"
            >
              The Beauty of Nature
            </Typography>
            <Typography
              variant="lead"
              color="white"
              className="mb-12 opacity-80"
            >
              It is not so much for its beauty that the forest makes a claim
              upon men's hearts, as for that subtle something, that quality
              of air that emanation from old trees, that so wonderfully changes
              and renews a weary spirit.
            </Typography>
            <div className="flex gap-2">
              <Button size="lg" color="white">
                Explore
              </Button>
              <Button size="lg" color="white" variant="text">
                Gallery
              </Button>
            </div>
          </div>
        </div>
      </div>
    </Carousel>
  );
}

问题原因 #

1. 路径解析错误：React项目中，直接写相对路径时，打包后的路径基准会随组件位置变化，容易出现指向偏差。
2. 资源未被打包工具处理：如果图片没放在public目录，也没通过import导入，Webpack/Vite这类工具不会把它加入构建产物，浏览器找不到对应资源。
3. 在线图片限制：部分非Unsplash的在线图片设置了防盗链，阻止跨域请求加载。

解决方法 #

本地图片加载方案 #

方案1：使用public目录的绝对路径

把图片放到项目根目录的public/images文件夹下，img的src直接写/images/xxx.jpg（开头斜杠代表public目录根）：

<img src="/images/image1.jpg" alt="本地图片" className="h-full w-full object-cover" />

方案2：通过import导入（推荐）

在组件顶部导入图片，打包工具会自动处理路径，直接用导入的变量作为src值：

import { Carousel, Typography, Button } from "@material-tailwind/react";
// 根据组件位置调整导入路径
import Image1 from "./images/image1.jpg";
import Image2 from "./images/image2.jpg";
import Image3 from "./images/image3.jpg";

export function CarouselWithContent() {
  return (
    <Carousel className="rounded-xl">
      <div className="relative h-full w-full">
        <img
          src={Image1}
          alt="image 1"
          className="h-full w-full object-cover"
        />
        {/* 其他内容保持不变 */}
      </div>
      <div className="relative h-full w-full">
        <img
          src={Image2}
          alt="image 2"
          className="h-full w-full object-cover"
        />
        {/* 其他内容保持不变 */}
      </div>
      <div className="relative h-full w-full">
        <img
          src={Image3}
          alt="image 3"
          className="h-full w-full object-cover"
        />
        {/* 其他内容保持不变 */}
      </div>
    </Carousel>
  );
}

在线图片加载方案 #

如果是其他在线图片无法加载：

• 先在浏览器新标签打开图片URL，确认图片本身可访问；
• 若存在防盗链，尝试给img标签添加crossOrigin="anonymous"属性：

<img src="你的在线图片URL" alt="在线图片" crossOrigin="anonymous" className="h-full w-full object-cover" />

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