Is it possible to render an image stored in laravel storage while in development mode?

Question

I'm working on a web app using React and Laravel which are in separate projects, I'm trying to render an image fetched from Laravel storage in an img tag using the URL i'm getting for example /storage/file-name.png

this is my show method:

  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');
    }

and in my react app i'm passing the URL to the component the contains the img tag as a props but nothing shows. I tried adding http://localhost:8000 to the /storage/file-name.png and result is the same.

PS: i console logged the image prop and it's returning /storage/file-name.png which is correct.

here is my dropzone component render method:

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>
    );
  }

is there away to show an image while in development mode? or should I host my app somewhere in order to be able to show the images?

Answer 1

Your front-end application doesn't have permission to see the file in your storage path for default.

You can try to convert your file in base64:

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

front-end:

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