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组件

1 个答案: