Question

我正在将一个react / php项目（它在apache上运行）迁移到create-react-app以及Express.js / live reloading等（用于开发）。

在这个项目中有从用户上传的图像，它们通过php文件保存在文档根目录之外，该文件接受要加载的文件名作为查询字符串。

file.php?image=file_name.png

及其相对反应的成分是

const Img = (props) => {

    const findFile = () => {
        // base64
        if(props.file && props.file.startsWith('data:image/')){
            return props.file;
        }

        return "file.php?name=" + props.file + "&type=" + props.type;
    };

    return (
        <img src={findFile()} alt={props.alt || props.file}/>
    );

};

迁移到create-react-app后，我在package.json

中添加了一个代理

"proxy":"http://localhost"

但是这样，只有当用户在仪表板页面上时才加载图像。在其他页面中，图像不起作用，因为更改了file.php。

的路径

在仪表板（http：/ localhost / auth）

中

127.0.0.1 - - [10/Oct/2017:23:59:12 +0200] "GET /file.php?name=avatar4.png&type=avatarDefaultDir HTTP/1.1" 200 12295

在另一页（例如：http://localhost/auth/profile）

127.0.0.1 - - [10/Oct/2017:23:59:17 +0200] "GET /auth/file.php?name=avatar4.png&type=avatarDefaultDir HTTP/1.1" 200 27

如何解决此问题？

Answer 1

您需要使用file.php文件的正确路径并使用file.php的绝对路径

而不是

return "file.php?name=" + props.file + "&type=" + props.type;

使用

return "/file.php?name=" + props.file + "&type=" + props.type;

这是假设file.php位于项目的根目录

create-react-app并通过php文件

1 个答案: