ReactJS => 本地图像未加载答案

【问题标题】：ReactJS => local image not loadingReactJS => 本地图像未加载
【发布时间】：2020-12-05 22:19:42
【问题描述】：

我在这个项目中使用 ReactJS，除了图像之外一切都运行良好。

奇怪的是它会加载外部图像，例如“http://Example.com/image.jpg”，但它不会加载本地图像

<img src={'/imgs/logo.jpg'} />

请帮帮我？

谢谢！

代码：

import React, { Component } from 'react';
import { Link } from 'react-router';

class Header extends Component {
  render() {
    return (
      <div className="container-fluid">
        <div className="row">
          <nav className="navbar" role="navigation">
            <div className="navbar-header">
                <Link to="/App">
                    <img src={'/imgs/logo.png'} alt="Jybly Logo" />
                </Link>
              <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <img className="bar" src='/imgs/icon-bar.png' />
              </button>
            </div>
            <div className="collapse navbar-collapse">
              {/*
              <ul class="nav navbar-nav">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Stay</a></li>
              </ul> */}
              <ul className="nav navbar-nav navbar-right">
                <li><Link to="/pages/register">Login/Join</Link></li>
                <li><Link to="/pages/cart">Cart</Link></li>
              </ul>
            </div>
            {/*/.nav-collapse */}
          </nav>
        </div>
      </div>
    );
  }
}

export default Header;

【问题讨论】：

你使用 webpack 吗？如果是，则必须先导入图像，例如 import imageName from './imgs/logo.png';然后

标签： reactjs react-router

【解决方案1】：

您需要const image = require('imgs/logo.png')@Louie4 和@hinok 提到的图像。然后你可以在你的代码<img src={ image } /> 中使用它。此外，您需要包含文件加载器，如下所示（webpack2 的代码）：

module.exports = {
  ...,
  module: {
    rules: [
      ...,
      { test: /\.png$|\.jpg$/, loader: 'file-loader' }, // Add other extensions if needed
    ]
  },
  ...
}

【讨论】：

【解决方案2】：

尝试在您的 img src 中要求，如下所示：

<img src={ require('/imgs/logo.png') }/>

【讨论】：

【解决方案3】：

我想通了

就这么简单，

我是这样编码的：

img src={ require('/imgs/logo.png') }/>

或者像这样：

img src={'/imgs/logo.png'}/>

但实际上是这样的：

img src={ require('../imgs/logo.png') }/>

2 点，哈哈。

【讨论】：