解决React中图片加载问题：理解图片资产处理机制

// src/components/ImageExample.jsx
import React from 'react';
import katieImage from '../assets/images/katie-zaferes.png'; // 根据实际路径调整

function ImageExample() {
  return (
    <div>
      <h1>使用Import导入图片</h1>
      <img src={katieImage} alt="Katie Zaferes profile" style={{ width: '200px' }} />
      <p>图片已通过Webpack处理和加载。</p>
    </div>
  );
}

export default ImageExample;

// src/data.js (假设你的数据文件)
import profilePic from './assets/images/katie-zaferes.png'; // 导入图片
import anotherPic from './assets/images/another-image.png'; // 导入其他图片

export const imageData = [
  {
    id: 1,
    name: "Katie Zaferes",
    image: profilePic, // 传递导入后的图片变量
    description: "An athlete profile."
  },
  {
    id: 2,
    name: "Another Person",
    image: anotherPic,
    description: "Another profile example."
  }
];

// src/components/ProfileCard.jsx
import React from 'react';

function ProfileCard({ data }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
      <h2>{data.name}</h2>
      <img src={data.image} alt={data.name} style={{ width: '150px', borderRadius: '50%' }} />
      <p>{data.description}</p>
    </div>
  );
}

export default ProfileCard;

// src/App.js
import React from 'react';
import { imageData } from './data';
import ProfileCard from './components/ProfileCard';

function App() {
  return (
    <div>
      <h1>动态加载图片示例</h1>
      {imageData.map(item => (
        <ProfileCard key={item.id} data={item} />
      ))}
    </div>
  );
}

export default App;

// src/components/Home.jsx
import React from 'react';

function Home() {
  return (
    <div>
      <h1>使用Public目录加载图片</h1>
      <img src="/images/wedding-photography.png" alt="Wedding photography example" style={{ maxWidth: '100%' }} />
      <p>图片直接从public目录加载，路径相对于服务器根目录。</p>
    </div>
  );
}

export default Home;

// src/data.js
export const publicImageData = [
  {
    id: 1,
    name: "Landscape View",
    imagePath: "/images/landscape.jpg", // 路径相对于public目录
    description: "A beautiful landscape scene."
  },
  {
    id: 2,
    name: "City Night",
    imagePath: "/images/city-night.png",
    description: "Vibrant city lights at night."
  }
];

// src/components/PublicImageCard.jsx
import React from 'react';

function PublicImageCard({ data }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
      <h3>{data.name}</h3>
      <img src={data.imagePath} alt={data.name} style={{ width: '250px' }} />
      <p>{data.description}</p>
    </div>
  );
}

export default PublicImageCard;

// src/App.js
import React from 'react';
import { publicImageData } from './data';
import PublicImageCard from './components/PublicImageCard';

function App() {
  return (
    <div>
      <h1>从Public目录动态加载图片示例</h1>
      {publicImageData.map(item => (
        <PublicImageCard key={item.id} data={item} />
      ))}
    </div>
  );
}

export default App;