Results 1 to 4 of 4

Thread: Recommended way to bundle/use images extreact into extreact app?

  1. #1

    Join Date
    Jul 2008
    Location
    Seattle
    Posts
    11

    Default Answered: Recommended way to bundle/use images extreact into extreact app?

    What is the recommended way to include a set of images into the extreact build environment/application and the use within the <Image src=".../...png"/> component? I've used the <img .../> element with external images, but haven't been able to make the <Image/> component work as the documentation on the src property isn't very specific.

  2. You can just use an img element with something like webpack-file-loader. The Image component is a holdover from Ext JS and isn't really needed.

  3. #2
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    You can just use an img element with something like webpack-file-loader. The Image component is a holdover from Ext JS and isn't really needed.

  4. #3

    Join Date
    Jul 2008
    Location
    Seattle
    Posts
    11

    Default

    For completeness: Here is the github site for webpack-file-loader which has a nice explanation: https://github.com/webpack-contrib/file-loader ...
    Once you have installed file-loader, updated your webpack.config.js, you can located your images for example /src/imgs/MyImage.png and and reference them using two methods (assumes your app.js file referencing them is in the the /src folder):

    1) import MyImage from './imgs/MyImage.png'
    then use it in an element: <img src={MyImage}/> or
    2) Or use require:
    <img src={require('./imgs/MyImage.png')}/>

  5. #4
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    42

    Default

    HI all,
    I am learning ExtReact recently.
    I find the problem to load the image like this topic.
    I followed this topic instruction to install folder-loader and set the following config to webpack-config.js'

    Code:
    module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'file-loader',
                options: {}  
              }
            ]
          }
        ]
      }
    }
    then import and use the image like JLKoszarek mentioned.
    However, I found other error which is 'react image Unexpected character ' ' (1:0)'

    May I have any advise?

Similar Threads

  1. Sencha ExtReact 6.5.1 is Now Available
    By mitchellsimoens in forum Q&A
    Replies: 0
    Last Post: 27 Jul 2017, 5:23 AM
  2. Images in ExtReact components
    By geniny in forum Q&A
    Replies: 1
    Last Post: 27 Jun 2017, 5:09 PM
  3. ExtReact box-sizing CSS
    By geniny in forum Q&A
    Replies: 6
    Last Post: 27 Jun 2017, 10:34 AM
  4. Using extReact with Extjs
    By philiparad in forum Q&A
    Replies: 1
    Last Post: 25 May 2017, 11:45 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •