title: Src images of user folder in assets - React
body: <p>Here I am looking for a way to use images in my react applications from a folder in assets/images, in a dynamic way. </p>
  
  <p>Here is the tree structure of my assets folder. </p>
  
  <p><a href="https://i.stack.imgur.com/lzcdp.png" rel="nofollow noreferrer">tree structure of my assets folder</a></p>
  
  <p>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). </p>
  
  <p>But at the time of displaying it, the image is not found... </p>
  
  <p>Here is what I tried: </p>
  
  <pre><code>&lt;img src={require(`../../images/user_logo/${userData.logo_name}`)} alt=""/&gt;
  </code></pre>
  
  <p>or </p>
  
  <pre><code>&lt;img src={`../../images/user_logo/${userData.logo_name}`} alt=""/&gt;
  </code></pre>
  
  <p>And a few other variations... but nothing. </p>
  
  <p>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. </p>
  
  <p>Thanks for your help</p>
  
  <p>Edit: </p>
  
  <p>My React component : </p>
  
  <pre><code>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}) =&gt; {
  
      const {isAuthenticated, setIsAuthenticated,userData} = useContext(AuthContext)
  
  
      const handleLogout = () =&gt; {
          authAPI.logout()
          setIsAuthenticated(false)
          toast.success('Vous êtes déconnecté !')
          history.push('/')
      }
  
  
      return( 
          &lt;nav&gt;
              &lt;Link to="/"&gt;&lt;img src={Logo} className="VSLogo"/&gt;&lt;/Link&gt;
              &lt;ul&gt;
                  &lt;li className="navItem"&gt;&lt;Link to="/teams"&gt;Equipes&lt;/Link&gt;&lt;/li&gt;
                  &lt;li className="navItem"&gt;&lt;Link to="/tournaments"&gt;Tournois&lt;/Link&gt;&lt;/li&gt;
                  &lt;li className="navItem"&gt;&lt;Link to="/esport"&gt;Esport&lt;/Link&gt;&lt;/li&gt;
              &lt;/ul&gt;
              {(!isAuthenticated &amp;&amp; (
                  &lt;&gt;
                      &lt;Link to="/register" className="signUpBtn"&gt;S'inscrire&lt;/Link&gt;
                      &lt;Link to="/login" className="connexionBtn"&gt;Se connecter&lt;/Link&gt;
                  &lt;/&gt;
              )) || (
                  &lt;&gt;
                      &lt;img src={`../../images/user_logo/${userData.logo_name}`} alt=""/&gt;
                      &lt;button onClick={handleLogout} className="connexionBtn"&gt;Déconnexion&lt;/button&gt;  
                  &lt;/&gt;
              )}
          &lt;/nav&gt;
      )
  }
  
  export default Header;
  </code></pre>
  
  <p>My Webpack config (it's webpack encore) </p>
  
  <pre><code>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) =&gt; {
          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();
  
  </code></pre>