React中如何通过img Props传递正确图片路径以渲染图片

你的代码里有几个关键问题导致图片无法渲染，逐一修正即可：

1. 组件接收Props的方式错误 #

React组件的参数是一个包含所有传入属性的props对象，你直接写function Case(photo)的话，photo其实是整个props对象，不是你传入的photo属性。必须用对象解构来获取正确的属性：

// 修正后
function Case({ photo }) {
  // ... 组件内容
}

2. 图片路径的写法错误 #

你写的photo={imgs / showcase1.png}是语法错误，正确的图片引用分两种场景：

场景一：图片放在src目录下（推荐） #

先在组件顶部导入图片文件，再把导入的变量传给组件：

// 导入图片（路径根据你的实际目录调整）
import showcase1 from './imgs/showcase1.png';
import showcase2 from './imgs/showcase2.png';
import showcase3 from './imgs/showcase3.png';
import showcase4 from './imgs/showcase4.png';

// 传递给组件
<Case photo={showcase1} />
<Case photo={showcase2} />

场景二：图片放在public目录下 #

直接写字符串路径，路径从public根目录开始：

<Case photo="/imgs/showcase1.png" />
<Case photo="/imgs/showcase2.png" />

3. 其他小问题修正 #

• React里要用className替代class，你的代码里部分地方还在用class，全部改成className；
• Tailwind的类名flex flex row要改成flex flex-row，连字符是正确的类名格式；
• 可以给photo设置默认值，避免不传属性时出现报错：

function Case({ photo = '' }) {
  // ...
}

完整修正后的代码 #

import showcase1 from './imgs/showcase1.png';
import showcase2 from './imgs/showcase2.png';
import showcase3 from './imgs/showcase3.png';
import showcase4 from './imgs/showcase4.png';

function Case({ photo }) {
  return (
    <div className="pr-3">
      <div className="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
        <a href="#">
          <img className="rounded-t-lg" src={photo} alt="案例图片" />
        </a>
        <div className="p-5">
          <a href="#">
            <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
              Noteworthy technology acquisitions 2021
            </h5>
          </a>
          <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">
            Here are the biggest enterprise technology acquisitions of 2021 so
            far, in reverse chronological order.
          </p>
          <a
            href="#"
            className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
          >
            Read more
            <svg
              aria-hidden="true"
              className="w-4 h-4 ml-2 -mr-1"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fillRule="evenodd"
                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                clipRule="evenodd"
              ></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  );
}

const ShowCase = () => {
  return (
    <div>
      <section className="flex flex-row pt-12">
        <Case photo={showcase1} />
        <Case photo={showcase2} />
        <Case photo={showcase3} />
        <Case photo={showcase4} />
      </section>
    </div>
  );
};

export default ShowCase;

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