资源中用户文件夹的Src映像-反应

Question

在这里，我正在寻找一种方法，以动态的方式在我的react应用程序中使用来自Assets/images的文件夹中的图像。

下面是我的资产文件夹的树结构。

但在显示它的时候，图像却找不到了……

下面是我尝试的：

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

或

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

我的反应组件：

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;

我的Webpack配置（它是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

我通过将.default添加到require来解决我的问题，显然这是由于webpack的修改和es模块。

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