Img 未在 React 组件中加载

Question

我正在尝试在我的组件中加载图像：

import React from 'react';
import style from './Sidebar.scss';

const Sidebar = () => (
  <nav className={style.sidebar}>
    <ul className={style.wrapper}>
      <li className={style.item}>
        <div>
          <img className={style.logo} src="../../img/myImg.png" alt="contactto logo" />
        </div>
      </li>
    </ul>
  </nav>
);

export default Sidebar;

但它不工作，我正在加载 Roboto 字体并且工作正常。

这是我来自 webpack.config 的代码片段：

{
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader?name=fonts/[name].[ext]',
      },
      {
        test: /\.(png|svg|jpg)$i/,
        use: {
          loader: 'file-loader?name=img/[name].[ext]',
        },
      },

我的 img 没有复制到我的 dist 文件夹。

Answer 1

您需要先 import 该图像：

import Image from '../../img/myImg.png';

然后使用这张图片，像这样：

img className = {style.logo} src = {Image} alt = "contactto logo" />

Img 未在 React 组件中加载

Img is not loading at React component

image

reactjs

webpack

webpack-file-loader