资产中用户文件夹的 Src 图像 - React

Question

Here I am looking for a way to use images in my react applications from a folder in assets/images, in a dynamic way.

Here is the tree structure of my assets folder.

tree structure of my assets folder

I would like to be able to import and use the image of the right user who is connected (I already get all the data).

But at the time of displaying it, the image is not found...

Here is what I tried:

<img src={require(`../../images/user_logo/${userData.logo_name}`)} alt=""/>

or

<img src={`../../images/user_logo/${userData.logo_name}`} alt=""/>

And a few other variations... but nothing.

Could it be a syntax problem or a webpack problem? Knowing that I use in this component a static image that I import at the beginning and use without any problem later, the problem is not the path.

Thanks for your help

Edit:

My React component:

import React, {useContext} from 'react';
import { Link } from 'react-router-dom';
import authAPI from "../services/authAPI";
import AuthContext from "../contexts/AuthContext"
import Logo from "../../images/VSLogo.svg";
import { toast } from 'react-toastify';

const Header = ({history}) => {

    const {isAuthenticated, setIsAuthenticated,userData} = useContext(AuthContext)


    const handleLogout = () => {
        authAPI.logout()
        setIsAuthenticated(false)
        toast.success('Vous êtes déconnecté !')
        history.push('/')
    }


    return( 
        <nav>
            <Link to="/"><img src={Logo} className="VSLogo"/></Link>
            <ul>
                <li className="navItem"><Link to="/teams">Equipes</Link></li>
                <li className="navItem"><Link to="/tournaments">Tournois</Link></li>
                <li className="navItem"><Link to="/esport">Esport</Link></li>
            </ul>
            {(!isAuthenticated && (
                <>
                    <Link to="/register" className="signUpBtn">S'inscrire</Link>
                    <Link to="/login" className="connexionBtn">Se connecter</Link>
                </>
            )) || (
                <>
                    <img src={`../../images/user_logo/${userData.logo_name}`} alt=""/>
                    <button onClick={handleLogout} className="connexionBtn">Déconnexion</button>  
                </>
            )}
        </nav>
    )
}

export default Header;

My Webpack config (it's webpack encore)

var Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .splitEntryChunks()

    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    .enableSassLoader()

    .copyFiles({
        from: './assets/images',
        to: 'images/[path][name].[ext]',

        //to: 'images/[path][name].[hash:8].[ext]',
        pattern: /\.(png|jpg|jpeg|svg)$/

    })   

    //.addEntry('admin', './assets/js/admin.js')
;

module.exports = Encore.getWebpackConfig();

Answer 1

I solved my problem by adding.default to the require, obviously it's due to a webpack modification again and to the es module.

var pathToLogo = require(`../../../public/images/user_logo/${userData.logo_name}`).default;