react静态资源如何访问

访问React静态资源的常见方法

使用public文件夹 在React项目中，public文件夹下的文件会直接复制到构建输出目录。可以通过相对路径直接访问，例如将图片放在public/images中，通过/images/photo.jpg引用。

通过import导入资源 在组件文件中直接import资源文件，Webpack会处理这些资源并生成正确路径。适用于图片、CSS等静态资源：

import logo from './logo.png';
function App() {
  return <img src={logo} alt="Logo" />;
}

使用环境变量PUBLIC_URL 在create-react-app项目中，可以使用process.env.PUBLIC_URL作为基础路径：

<img src={`${process.env.PUBLIC_URL}/img/logo.png`} />

CSS中引用资源 在CSS文件中可以使用相对路径引用资源，Webpack会解析这些路径：

.background {
  background-image: url(./assets/bg.jpg);
}

动态加载资源 对于需要动态加载的资源，可以使用require.context或动态import：

const imageContext = require.context('./assets', true);
const imagePath = imageContext(`./${imageName}.jpg`);

CDN或外部资源 直接使用完整URL引用托管在CDN或外部的资源：

<img src="https://cdn.example.com/image.jpg" />

构建后的路径处理 确保构建配置中output.publicPath设置正确，影响资源最终访问路径：

// webpack.config.js
output: {
  publicPath: '/static/'
}