CODEWITHSUNDEEP
javascriptfacebookreactjssvgwebpack
bilo-io
bilo-io

Reputation: 597

React - State Error when loading image

I'm getting a strange issue in React, when trying to display an image. The code causing this is an <img src={'./assets/logo.svg'} /> tag. However, despite the error message, the image displays.

The error message is the following: enter image description here

This is the component code:

import React from 'react';
import ReactDOM from 'react-dom'
require('../img/logo.svg');

export default class App extends React.Component {

constructor(props) {
    super(props);        
}
render() {
    return (
        <div className="app-wrapper">
            <img src={'./assets/logo.svg'} />
        </div>
    )
}

ReactDOM.render( <App />, document.getElementById('app'));
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Pegasus</title>
</head>

<body>
    <div id="app" />
    <script src="app.js" type="text/javascript"></script>
</body>

</html>

Any suggestions are highly appreciated! Thanks!!

Upvotes: 0

Views: 547

Answers (1)

Dan
Dan

Reputation: 8794

There are quite a few things, as Martin suggested in the comments, do you need the require statement on line 3?

Firstly, you are also missing a closing parenthesis on your class. Secondly, you need to either import or require the image.

import React from 'react';
import ReactDOM from 'react-dom';
import logo from './assets/logo.svg';

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="app-wrapper">
        <img src={logo} />
        {/* OR <img src={require('./assets/logo.svg')} /> */}
      </div>
    );
  }
}

A final note, when you're passing down props that are of the type String, you do not need to wrap them in {}, you can pass them down like such:

<Navigation title="My Navigation" />

Upvotes: 3

Related Questions