Question

我在这个项目中使用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;

Answer 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
    ]
  },
  ...
}

Answer 2

尝试在img src中使用，如下所示：

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

Answer 3

我想通了

就这么简单，

我这样编码：

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

或者像这样：

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

但它实际上是这样的：

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

2点，LOL。

ReactJS =＆gt;本地图像未加载

3 个答案: