Sr c изображений пользовательских папок в активах - React - PullRequest
Новая
       87

Sr c изображений пользовательских папок в активах - React

0 голосов
/ 30 апреля 2020

Здесь я ищу способ использования изображений в моих приложениях реагирования из папки assets / images, динамически c.

Вот древовидная структура моей папки активов.

древовидная структура моей папки активов

Я хотел бы иметь возможность импортировать и использовать изображение нужного пользователя, который подключен (я уже получаю все данные ).

Но во время его отображения изображение не найдено ...

Вот что я попробовал: 

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

или 

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

И несколько других вариантов ... но ничего.

Может быть, это проблема синтаксиса или проблема веб-пакета? Зная, что я использую в этом компоненте статическое c изображение, которое я импортирую в начале и использую без проблем позже, проблема не в пути.

Спасибо за вашу помощь

Редактировать:

Компонент My React: 

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) 

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

1 Ответ

0 голосов
/ 01 мая 2020

Я решил свою проблему, добавив .default к требованию, очевидно, это снова из-за модификации веб-пакета и модуля es. 

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