Image path is not working in react components laravel project

Active3 hr before
Viewed126 times

8 Answers


Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,In my react and Laravel project, images are not showing in react components. My images are in public/img folder of Laravel and I am trying to access these in resources/js/components/services.js i have tried these methods, Using stretch work assignments to help engineers grow

resources and public folder are in the same folder so path from services.js to img folder should be like this

. / .. / .. / .. / public / img / image.png

 Pretag team - issue, fix, solve, resolve

Working With JavaScript Vue React Vendor Extraction Custom Webpack Configuration ,Working With Stylesheets Tailwind CSS PostCSS Sass URL Processing Source Maps ,Custom Webpack Configuration

 Pretag team - issue, fix, solve, resolve

cause i tested and nothing happens!,Hi, do you have deployed this app? cause im trying with mine and nothing happens! thanks!,is csrf configuration needed? because I have error with that, thanks

 composer require laravel / ui
 php artisan ui react

Let’s start by creating a new Laravel project and change default scaffolding to React. Run these commands.,Today we are building an image gallery with Laravel and React. We are going to use react-dropzone to build an image uploader. react-dropzone is a  React’s implementation of popular drag and drop library for file uploading. On the backend, we are going to use Laravel’s Storage API to store images. , Implementing Infinite Scroll in React and Laravel June 28, 2018

 Pretag team - issue, fix, solve, resolve

 Pretag team - issue, fix, solve, resolve

We currently have the default Bulma logo in our header. It's also an image link that points to a separate domain ( This won't be good long term because if Bulma ever decided to change that URL, then our app's logo would stop working.,Let's try building this application now and seeing what the Angular CLI does.,The assets folder that the Angular CLI generated for us is the perfect place to use for storing images.

For instance, if we have an image at src/assets/img/logo.png, we would add this to our template:

template: `
<img src="assets/img/logo.png">
load more v

It's no secret that Vue.js is a favorite in the Laravel community, but what if you want to use React in a Laravel project? While Laravel isn't set up to use React out-of-the-box like it is with Vue, it's very easy to integrate React components into your application.,While Laravel Mix is set up to use Vue by default in Laravel 5.4, there is a mix.react() method that makes it very easy to get going with React in your projects.,To finish your Laravel set up, register a user at http://<your-app-url>/register — we will be using this user data in our React component and placing it on the home.blade.php page, which (if you have run the Laravel auth scaffolding command) is only available if you have logged in.


import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Example extends Component {
    render() {
        return (
                <h1>Cool, it's working</h1>

export default Example;

// We only want to try to render our component on pages that have a div with an ID
// of "example"; otherwise, we will see an error in our console
if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
load more v

Other "image-working" queries related to "Image path is not working in react components laravel project"