question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to import images from src folder

See original GitHub issue

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”?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:3
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

4reactions
tannerlinsleycommented, Oct 18, 2017

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 notifications@github.com 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 https://github.com/nozzle/react-static/issues/36#issuecomment-337637152, or mute the thread https://github.com/notifications/unsubscribe-auth/AFUmCVNUaORQxUFgL5_bs3MavBkKH8Ybks5sth4ugaJpZM4P3XMH .

0reactions
tannerlinsleycommented, Oct 20, 2017

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'
Read more comments on GitHub >

github_iconTop Results From Across the Web

cannot import image with create-react-app - Stack Overflow
I have a Home component and this is how I am importing the file: import photo from './party.png';. The component is located in...
Read more >
Can't import image from src #585 - GitHub
So I have a list of reviews each with an logo field which is a path to the image. The images are in...
Read more >
Easy Way to Use Images in React | No Import | No Require
What is the most simple and easy way to use images in ReactJS? This react js tutorial will answer following questions:- How to...
Read more >
Importing Images With React - Stack Abuse
In this short article, learn how to import images in React using require() and the import statement.
Read more >
React - load new image - error | Physics Forums
In the src folder there is a folder images with the old image. ... Module not found: Error: You attempted to import /logo.png...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found