Question

import React from 'react';
import image from './picture.jpg';

export class NavBar extends React.Component {
    render() {

    return (
        <img  src = {image}/>
    )
}

}

ERROR in ./dev/js/picture.jpg
Module parse failed: D:\App\Webstrome\programs\Project1\dev\js\picture.jpg   Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)

我正在尝试导入同一目录中的图片，但我收到了上述错误。有人能告诉我如何解决它吗？

Answer 1

您不需要导入图片文件，它将通过浏览器加载HTTP：

import React from 'react'

export default class NavBar extends React.Component {
    render() {

        return (
            <img  src="/picture.jpg" />
        )
    }
}

Answer 2

如果您想在调用之前将图像导入到文件中，则需要按照前面提到的方式配置您的加载器，如下所示：在您的webpack配置文件中：

module: {
    rules: [
        {
            test: /\.(jpg)$/,
            use: [
                {
                    loader: 'file-loader',
                },
            ]
        },
    ],
},

然后安装：

npm install file-loader

或

yarn add file-loader

您也可以在导入图像之前尝试导出图像。这通常仅用于与组件分开的目录中的图像。在与图像位于同一目录中的单独js文件中：

export picture from './picture.jpg';

有关更多信息，请参阅以下链接：

http://interglobalmedianetwork.com/post/importing-images-in-react/

https://webpack.js.org/loaders/

如何在同一目录中导入图片

2 个答案: