Unable to import images from src folder

[malonehedges]

Currently trying to import images, but without extra configuration am unable to get it to build.

...
=> [✓] App Bundled: 3521.463ms
=> Exporting Routes...
{ SyntaxError: /Users/malonehedges/projectPath/src/assets/myimage.png: Unexpected character '�' (1:0)
> 1 | �PNG
    | ^
...

"Add example configuring webpack to import images from the src folder"?

[tannerlinsley]

I’ll look into this asap

…

On Thu, Oct 12, 2017 at 10:33 AM Malone Hedges ***@***.***> wrote: Currently trying to import images, but without extra configuration am unable to get it to build. ... => [✓] App Bundled: 3521.463ms => Exporting Routes... { SyntaxError: /Users/malonehedges/projectPath/src/assets/myimage.png: Unexpected character '�' (1:0) > 1 | �PNG | ^ ... "Add example configuring webpack to import images from the src folder"? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#36>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCQ8RorD_5Go_1WetIR_sEJRvfqK5ks5srk2AgaJpZM4P3XMH> .

[whmountains]

I can't import images either, but the symptoms are slightly different:

import photo from '../assets/starry-night.jpg'

photo now returns a base64 data url for the broken image icon. lolwat?

[D1no]

Have you looked at: #24 (comment) ?

[DanWebb]

I know an example config is requested but is there a reason this isn't built in? Gatsby enables it by default and actually suggests using this method to import assets for seemingly valid reasons.

Sorry if this is already being worked on it was just something I expected to be able to do, maybe I'm spoilt.

[tannerlinsley]

This functionality is going to be built in, similar to Gatsby. It would seemingly only be a few lines of webpack config, but we’re currently reworking the innards of the build system a little bit to better accommodate things like this. Not only for built-in stuff, but for even further customization. Hang tight.

…

On Wed, Oct 18, 2017 at 9:50 AM Dan ***@***.***> wrote: I know an example config is requested but is there a reason this isn't built in? Gatsby enables it by default actually suggests using <https://www.gatsbyjs.org/docs/adding-images-fonts-files/> this method to import assets for seemingly valid reasons. Sorry if this is already being worked on it was just something I expected to be able to do, maybe I'm spoilt. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#36 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCVNUaORQxUFgL5_bs3MavBkKH8Ybks5sth4ugaJpZM4P3XMH> .

[tannerlinsley]

This should be fixed in the latest version. Please upgrade both global and local packages to version 2.0.0

Make sure you import and use the withFileLoader from react-static's plugins in your static.config.js file:

import axios from 'axios'
//
import withCss from 'react-static/lib/plugins/withCssLoader'
import withFiles from 'react-static/lib/plugins/withFileLoader'

export default {
  getSiteProps: () => ({
    title: 'React Static',
  }),
  getRoutes: async () => {
    const { data: posts } = await axios.get('https://jsonplaceholder.typicode.com/posts')
    return [
      {
        path: '/',
        component: 'src/containers/Home',
      },
      {
        path: '/about',
        component: 'src/containers/About',
      },
      {
        path: '/blog',
        component: 'src/containers/Blog',
        getProps: () => ({
          posts,
        }),
        children: posts.map(post => ({
          path: `/post/${post.id}`,
          component: 'src/containers/Post',
          getProps: () => ({
            post,
          }),
        })),
      },
      {
        is404: true,
        component: 'src/containers/404',
      },
    ]
  },
  webpack: [withCss, withFiles],
}

Then you can simply import images in your js

import logo from './logo.png'