react 如何封装一个获取本地图片的公共函数

在React中封装一个获取本地图片的公共函数通常意味着你需要创建一个可以在不同组件中复用的方式来处理图片资源的加载。这里有一个简单的例子，展示如何封装这样的函数：

import React from 'react';

// 封装获取图片路径的公共函数
function getImageSrc(imageName) {
    // 假设你的图片资源都存放在public/images目录下
    return require(`../public/images/${imageName}.png`);
}

// 使用封装的函数在组件中加载图片
function ImageComponent(props) {
    // 使用getImageSrc函数获取图片路径
    const imageSrc = getImageSrc(props.imageName);

    return (
        <div>
            <img src={imageSrc} alt={props.imageName} />
        </div>
    );
}

export default ImageComponent;

在这个例子中，`getImageSrc`函数通过`require`函数动态地引入图片，这样就可以在编译时将图片文件作为静态资源打包进最终的JavaScript文件中。这个函数接受一个图片名称作为参数，并返回相应的图片路径。

需要注意的是，在生产环境中，你可能需要使用到更复杂的路径解析方式，例如使用Webpack的`require.context`或者其他的图片处理库（如`file-loader`或`url-loader`），以便更有效地管理图片资源。