src/images folder in create-react-app

I have an app scaffolded using create-react-app. I would like to have the folder structure like this:

src/
  components/
    CustomAppBar.js
  images/
    logo.svg
  App.js
  index.tsx
images.d.ts

Currently I would like to use the logo.svg in the images folder in CustomAppBar.js. Currently this file looks like this:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import logo from '*.svg';

const styles = {
  flex: {
    flex: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  root: {
    flexGrow: 1,
  },
};

function ButtonAppBar(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <AppBar position="static" title={<img styles={{height: '50px'}} src={logo} />}>
        <Toolbar>
          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="title" color="inherit" className={classes.flex}>
            Title
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

ButtonAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ButtonAppBar);

As expected, this fails with:

Module not found: Can't resolve '*.svg' in 'somepathsrccomponents

The content of images.d.ts is stock standard:

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'

I have found a couple of suggestions elsewhere that mention modifying Webpack config. It seems create-react-app has hidden away Webpack config stuff. What’s the best practice when it comes to this?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

What I normally do for assets under /public/assets i import my files then in my react components using src i can access them using process.env.PUBLIC_URL + '/assets/{ENTER REST OF PATH HERE}'

here is a code sample how I implement it.

import React, { Component } from 'react';

const iconPath = process.env.PUBLIC_URL + '/assets/icons/';

export default class TestComponent extends Component {
    constructor(props) {
        super(props);
    }
    render(){
    return (<img
        src={`${iconPath}icon-arrow.svg`}
        alt="more"
    />)
    }
}

Here is the link that got me started implementing it this way.
https://github.com/facebook/create-react-app/issues/2854

I also noticed you are importing logo incorrectly and should be import logo from '../images/logo.svg' or if logo.svg does not have an export default you should be using import {logo} from '../images/logo.svg'

Method 2

You can use ES6 import to locate any file (images, audio, etc) from the root folder and add them to your app.

import React from 'React'
import errorIcon from './assets/images/errorIcon.svg'
import errorSound from './assets/sounds/error.wav'

class TestComponent extends React.Component 
{ 
    render() 
    {
        return (

            <div>
                <img src={ errorIcon }
                     alt="error Icon" />

                <audio src={ errorSound } />
            </div>
        )
    }
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x