Warning add image via React and Webpack

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>
        );
    }

score 0 · Answer 1 · answered Oct 29 '17 at 17:24

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 '17 at 17:24

FuzzyTree

32,014
3
54
85

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. – Juan Reina Pascual Oct 29 '17 at 20:05

Warning add image via React and Webpack

1 Answers1