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

【问题标题】：how to import a picture in the same directory如何在同一目录中导入图片
【发布时间】：2017-08-30 07:20:21
【问题描述】：

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)

我正在尝试导入同一目录中的图片，但出现上述错误。谁能告诉我怎么解决？

【问题讨论】：

Import Images in Module Through Webpack的可能重复
正确，好像没有配置加载器。请参阅@MayankShukla 的链接。

标签： reactjs

【解决方案1】：

您不需要导入图像文件，它会在浏览器中通过 HTTP 加载：

import React from 'react'

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

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

【讨论】：

你好，我试过了，还是一样的错误。
无视。再一次 - 您不需要将图像导入 js 代码。如果错误相同 - 导入仍然存在。删除import image from './picture.jpg'; 行。

【解决方案2】：

如果您希望在调用之前将图像导入文件，您需要像前面提到的那样在您的 webpack 配置文件中配置您的加载器：

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

然后安装：

npm install file-loader

或

yarn add file-loader

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

export picture from './picture.jpg';

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

【讨论】：