Предупреждение Добавить изображение через React и Webpack [дубликат]

Question

Предупреждение Добавить изображение через React и Webpack [дубликат]

На этот вопрос уже есть ответ:

Динамически добавлять изображения React Webpack 7 ответов

Когда я пытаюсь добавить какое-то изображение через webpack и реагирую, изображение отображается в браузере, но я получил следующее предупреждение:

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

Это мой реактивный компонент:

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

И если я ставлю прямо:

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

появляется предупреждение.

Решенный: Ну, я не потому, что, но, чтобы избежать ПРЕДУПРЕЖДЕНИЯ, мне пришлось переместить требование от src к const img, как:

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

reactjs,webpack,

0

Ответов: 1

reactjs, WebPack,

Похожие вопросы

score 0 · Answer 1

0

См. Раздел « Динамическое добавление изображений» React Webpack . Вам нужно будет использовать, url-loaderкоторый позволит вам импортировать изображение

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