Laravel项目中React组件本地图片无法正常显示问题求助

Let's work through your image display issue step by step—here's how to fix it and get your back arrow showing up properly:

1. Fix the Duplicate Import & Unnecessary SVG Nesting #

First, you don't need to import BackIcon in both app.js and Paginator.js—this can cause variable conflicts or path processing issues. Stick to importing it only where you use it (in Paginator.js). Also, nesting an <img> inside an <svg> tag is unnecessary here; just use the <img> directly:

// /resources/js/components/Paginator.js
import React, { Component } from 'react';
import BackIcon from '../images/back.svg';

export class Paginator extends Component {
  render() {
    return(
      <div className="flex flex-row">
        <button type="button">
          <img src={BackIcon} width="30" height="30" alt="back"/>
        </button>
      </div>
    )
  }
}

2. Configure webpack.mix.js to Auto-Package Images to Public #

If you want to automatically copy your resources/js/images folder to public/images (for cleaner direct path references), add a copyDirectory rule to your webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .react()
   .sass('resources/sass/app.scss', 'public/css')
   // Add this line to copy your image directory
   .copyDirectory('resources/js/images', 'public/images');

After running npm run watch or npm run dev, your images will be copied to public/images. Now you can reference them directly without importing:

// In Paginator.js, no import needed
<img src="/images/back.svg" width="30" height="30" alt="back"/>

This approach keeps your image paths straightforward and avoids any import-related bugs.

3. About FILESYSTEM_DRIVER Setting #

Your current FILESYSTEM_DRIVER = 'local' is totally fine! This config controls Laravel's backend file storage (like where uploaded files are saved), and has no direct impact on frontend React components referencing static images. You only need to change this if you're using Laravel's asset() or storage() helpers to generate image URLs from the backend, which isn't necessary for your current use case.

Quick Troubleshooting Checks #

• Double-check that resources/js/images/back.svg exists, and that the filename/case matches exactly (Linux/macOS systems are case-sensitive).
• Run npm run clean to clear Mix's cache, then re-run npm run watch—cached files can sometimes cause path weirdness.

内容的提问来源于stack exchange，提问作者Prog345