在开发模式下是否可以渲染存储在 laravel 存储中的图像？答案

【问题标题】：Is it possible to render an image stored in laravel storage while in development mode?在开发模式下是否可以渲染存储在 laravel 存储中的图像？
【发布时间】：2020-06-26 11:38:09
【问题描述】：

我正在使用位于不同项目中的 React 和 Laravel 开发 Web 应用程序，我正在尝试使用 URL I'我得到例如/storage/file-name.png

这是我的表演方法：

  public function show(Patient $patient)
    {
        $this->response = new stdClass();
        ...My code

        $this->response->image =  Storage::url($patient->user->image);

        ...My code
        return response()->json($this->response, $this->successStatus)->header('content-type', 'application/json');
    }

在我的反应应用程序中，我将 URL 传递给包含 img 标记作为道具但没有显示的组件。我尝试将http://localhost:8000 添加到/storage/file-name.png，结果是一样的。

P.S：我控制台记录了image 属性，它返回了/storage/file-name.png，这是正确的。

这是我的 dropzone 组件渲染方法：

render() {
    const { isHighLight } = this.state;
    const { isMultiple, isEnabled, title, image } = this.props;
    return (
      <div
        className={classNames({
          dropzone: true,
          'dropzone--disbaled': !isEnabled,
          'dropzone--highlight': isHighLight
        })}
        role='presentation'
        onClick={this.handleDropzoneClick}
        onDragLeave={this.handleDragLeave}
        onDragOver={this.handleDragOver}
        onDrop={this.handleDrop}
      >
        <img src={image} alt='dropzone' className='dropzone__img' />
        <input ref={this.fileInputRef} type='file' className='dropzone__input' multiple={isMultiple} onChange={this.handleFileUploaded} />
        <span className='dropzone__title'>{title}</span>
      </div>
    );
  }

有没有办法在开发模式下显示图像？或者我应该在某个地方托管我的应用程序以便能够显示图像？

【问题讨论】：

你需要提供一个更好的例子，这里缺少与 React 应用程序相关的代码。请通读How To Create A Minimal, Reproducible Example
请提供一些前端代码。你还创建了符号链接吗？
听起来更像是您的虚拟主机设置的问题。您需要为两个代码库设置一个虚拟主机。
我更新了问题@rhys_stubbs
@Juakali92 是的，我想过，但我没有从哪里开始

标签： javascript php reactjs laravel

【解决方案1】：

您的前端应用程序默认无权查看您存储路径中的文件。

你可以尝试用base64转换你的文件：

public function getFile(string $name)
{
    if (file_exists("storage/{$name}")) {
        return base64_encode(file_get_contents("storage/{$name}"));
    }
}

前端：

<img src="data:image/png;base64, base64 code here">

【讨论】：