React新手：如何从不同文件夹访问并导入图片？

针对你在src/views/Landingpage/index.js中导入src/assert/image/目录下图片的需求，这里有两种实用方法：

方法一：直接导入图片文件（推荐） #

因为图片位于src目录内，Create React App默认的Webpack打包工具会自动处理这类资源，步骤如下：

1. 在index.js中用import语句导入目标图片，注意相对路径的正确性：从src/views/Landingpage/index.js到src/assert/image/的相对路径是../../assert/image/（向上回退两层目录，再进入目标文件夹）
2. 在组件中使用导入的图片变量作为img标签的src属性值

代码示例：

// src/views/Landingpage/index.js
// 替换your-image-name为实际图片文件名（比如logo.png、banner.jpg）
import heroImage from '../../assert/image/your-image-name.png';

function LandingPage() {
  return (
    <div className="landing-page">
      {/* 使用导入的图片变量 */}
      <img src={heroImage} alt="页面头部横幅" />
    </div>
  );
}

export default LandingPage;

这种方式的优势是Webpack会对图片进行压缩、哈希命名等优化，适合需要打包处理的资源。

方法二：使用public目录（可选） #

如果你不想通过import导入，也可以把图片移动到项目根目录的public/image/文件夹下，然后直接使用绝对路径引用：

function LandingPage() {
  return (
    <div className="landing-page">
      <img src="/image/your-image-name.png" alt="页面头部横幅" />
    </div>
  );
}

注意：这种方式下Webpack不会对图片进行优化，适合无需打包处理的静态资源。

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