Warning add image via React and Webpack [duplicate]

Question

When I try to add some image via webpack and react the image appears fine on the browser but I got the next warning:

WARNING in ./index.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <!DOCTYPE html>
| <html>
|   <head>
 @ . ^.*$
 @ ./quiz.jsx
 @ ./app.jsx
 @ ./main.jsx

This is my react componet:

import * as React from 'react';

export const Quiz = (props) => {
    const img = './images/williamshakespeare.jpg';
    return (
        <div className='row'>
            <div className='col-md-4'>
                <img src={require(`${img}`)} alt='author' />
            </div>
        </div>
    );
}

And if I put the directly:

<img src={require(./images/williamshakespeare.jpg)} alt='author' />

the warning no appears.

Solved: Well, I don´t why but to avoid the WARNING I had to move the require from src to const img like:

export const Quiz = (props) => {
        const img = require('./images/williamshakespeare.jpg');
        return (
            <div className='row'>
                <div className='col-md-4'>
                    <img src={img} alt='author' />
                </div>
            </div>
        );
    }

FuzzyTree · Accepted Answer · 2017-10-29 17:24:54Z

0

See Dynamically Add Images React Webpack. You'll need to use url-loader which will allow you to import the image

import williamshakespeare from './images/williamshakespeare.jpg';
...
<img src={require(williamshakespeare)} alt='author' />

answered Oct 29, 2017 at 17:24

FuzzyTree

32.4k3 gold badges58 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Juan Reina Pascual Over a year ago

Thanks for the answer, Before writing question I read that post and solved my problem but now I got a new warning although the image is shown fine.

Collectives™ on Stack Overflow

Warning add image via React and Webpack [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related