react.js如何插入图片

在React.js中插入图片的方法

使用本地图片
将图片文件放入项目目录（如src/assets或public文件夹），通过import或直接引用路径引入。

// 方法1：通过import引入（推荐）
import logo from './assets/logo.png';

function App() {
  return <img src={logo} alt="Logo" />;
}

// 方法2：直接使用public目录下的图片（无需import）
function App() {
  return <img src="/images/logo.png" alt="Logo" />;
}

使用远程图片
直接使用图片的URL作为src属性值。

function App() {
  return (
    <img 
      src="https://example.com/image.jpg" 
      alt="Remote Image" 
    />
  );
}

动态加载图片
结合require或模板字符串动态生成路径（适用于条件渲染）。

function App({ imageName }) {
  const imagePath = require(`./assets/${imageName}.png`);
  return <img src={imagePath} alt="Dynamic Image" />;
}

注意事项

• 使用alt属性提高可访问性。
• 本地图片建议放在src目录下，Webpack会优化处理。
• public目录中的文件不会被Webpack处理，需手动管理路径。