Dynamically Add Images React Webpack

Question

I ve been trying to figure out how to dynamically add images via React and Webpack   I have an image folder under src images  and a component under src components index   I m using url-loader with the following config for webpack              test      png jpg            loader   url-loader limit 200000          Within the component I know I can add require image path  for a specific image at the top of the file before I create the component but I want make the component generic and have it take a property with the path for the image that is passed from the parent component     What I have tried is    lt img src  require this props img     gt    For the actual property I have tried pretty much every path I can think of to the image from the project root  from the react app root  and from the component itself   Filesystem    -- src       app js      --images          image jpg          image jpg      -- components         parent component js         child component js   The parent component is basically just a container to hold multiples of the child so      lt ChildComponent img data img1   gt   lt ChildComponent img data img2   gt  etc       Is there any way in which to do this using react and webpack with url-loader or am I just going down a wrong path to approach this

User · Accepted Answer

Using url-loader  described here  SurviveJS - Loading Images   you can then use in your code    import LogoImg from  YOUR PATH logo png     and   lt img src  LogoImg   gt    Edit  a precision  images are inlined in the js archive with this technique  It can be worthy for small images  but use the technique wisely

User · Answer

If you are looking for a way to import all your images from the image     Import all images in image folder function importAll r        let images           r keys   map  item  index    gt    images item replace              r item           return images     const images   importAll require context     images   false      gif jpe g svg         Then    lt img src  images  image-01 jpg     gt    You can find the original thread here  Dynamically import images from a directory using webpack

User · Answer

here is the code      import React    Component   from  react       import logo from    logo svg       import    image css       import Dropdown from  react-dropdown       import axios from  axios        let obj            class App extends Component         constructor            super            this state               selectedFiles                       this fileUploadHandler   this fileUploadHandler bind this                  fileUploadHandler file           let selectedFiles    this state selectedFiles          selectedFiles  push file           this setState  selectedFiles  selectedFiles                    render             let Images   this state selectedFiles map image   gt               lt div className    image parent  gt                  lt img src  require image src                   gt             lt  div gt                       return                lt div className  image-upload images main  gt                lt input type  file  onClick  this fileUploadHandler   gt               Images                lt  div gt                                export default App

User · Answer

UPDATE  this only tested with server side rendering   universal Javascript   here is my boilerplate   With only file-loader you can load images dynamically - the trick is to use ES6 template strings so that Webpack can pick it up   This will NOT work     const myImg      cute jpg   lt img src  require myImg     gt    To fix this  just use template strings instead    const myImg      cute jpg   lt img src  require    myImg       gt    webpack config js    var HtmlWebpackPlugin    require  html-webpack-plugin   var ExtractTextWebpackPlugin   require  extract-text-webpack-plugin    module exports       entry      src app js     output         path      dist       filename    app bundle js         plugins       new ExtractTextWebpackPlugin  app bundle css       module         rules            test      css          use   ExtractTextWebpackPlugin extract           fallback    style-loader           use   css-loader                         test     js          exclude    node modules          loader   babel-loader         query            presets    react   es2015                         test      jpg          exclude    node modules          loader    file-loader

User · Answer

So you have to add an import statement on your parent component   class ParentClass extends Component     render         const img   require     images img png        return          lt div gt           lt ChildClass           img  img            gt         lt  div gt                 and in the child class   class ChildClass extends Component     render         return          lt div gt             lt img             src  this props img              gt         lt  div gt

User · Answer

You do not embed the images in the bundle  They are called through the browser  So its   var imgSrc      image image1 jpg    return  lt img src  imgSrc    gt

User · Answer

If you are bundling your code at the server-side  then there is nothing stopping you from requiring assets directly from jsx    lt div gt     lt h1 gt Image lt  h1 gt     lt img src  require    assets image png      gt   lt  div gt

[reactjs] Dynamically Add Images React Webpack

Examples related to reactjs

Examples related to webpack

Examples related to image-loading

Examples related to urlloader