Question

我是 Laravel 和 React 的新手，正在做一个测试项目，但我发现自己在两个框架之间访问数据方面遇到了困难。

我想将在 React 组件中创建的图像元素渲染到 Laravel 刀片中。用户通过 Laravel 刀片中的表单上传图像后，从 {{Session::get('image')}} 接收图像的来源。

如何从 React 组件状态中访问 {{Session::get('image)}} 以便我可以根据用户上传的内容使用动态 src 呈现 img 标签？身份验证不是必需的。

更多信息：

我可以使用以下方法在 Laravel 刀片中访问上传的图像：

<img src="images/{{Session::get('image')}}" class="img-fluid">

来自这种形式：

<form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">
            @csrf
                <div class="col-md-6">
                    <input type="file" id="image" name="image" class="form-control" hidden>
                    <label for="image" class="btn btn-primary">Upload Image 1</label>
                </div>
</form>

但我更愿意通过 React 组件渲染上传的图像：

import React, { Component } from "react";

class Test extends Component {
    constructor (props) {
        super(props);
        this.state = {
            img : ""
        };
    }
    render () {
        const img = this.state.img;

        return (
            <div className="img-wrapper">
                <img src={`${img}`} alt="test" className="img-fluid" />
            </div>
        );
    }
}

export default Test;

如何将 {{Session::get('image')}} 中的数据输入到上面组件中的 img 状态？

Answer 1

有多种方法可以实现这一点。一种方法是在 Laravel 视图中呈现 JS 代码，它将图像值分配给一个 JS 变量。

在您的 Blade 文件中（在加载您的 React 代码的脚本标签上方）：

<script>
window.image_src = "images/{{Session::get('image')}}";
</script>

在反应代码中：

const img = window.image_src;

其他选项是通过 ajax 加载图像源，或将其作为数据属性存储在 HTML 元素中。

Answer 2

除了levi所说的，你可以在这里查看https://reactjs.org/docs/faq-ajax.html，关于如何获取该数据，你需要另一个返回图像字符串的路由

如何在 React 组件中访问 Laravel 会话数据？

2 个答案: