我正在构建一个小的react应用程序,我的本地图像不会加载。图像就像占位符。它/ 200 x200型负载。我想可能是服务器的问题?

这是我的App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={"/images/resto.png"} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

index.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';

let history = createHistory();

render(
    <Router history={history} >
        <Route path="/" component={App} >
            <Route path="vzdelani" component="" />
            <Route path="znalosti" component="" />
            <Route path="prace" component="" />
            <Route path="kontakt" component="" />
        </Route>
        <Route path="*" component="" />
    </Router>,
    document.getElementById('app')
);

和server.js:

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:3000');
});

当前回答

首先,检查您是否已经指定了图像的当前位置,如果您在设置正确路径时遇到困难,您可以使用此方法。 第二,像导入任何js文件一样导入图像,就像这样

import x from "../images/x.png";
<img src={x}/>

你可以给x起任何名字!!

其他回答

我将分享我在一个创建-反应-应用程序项目中工作的解决方案:

在同一个images文件夹中包含一个js文件,导出所有的图像,在组件中,你需要的图像导入图像并使用它:),Yaaah就是它,让我们详细看看

文件夹结构与JS文件

// js file in images folder
export const missing = require('./missingposters.png');
export const poster1 = require('./poster1.jpg');
export const poster2 = require('./poster2.jpg');
export const poster3 = require('./poster3.jpg');
export const poster4 = require('./poster4.jpg');

你可以在你的组件中导入: import {missing, poster1, poster2, poster3, poster4} from '../../assets/indexImages';

你现在可以使用这个作为SRC to image标签。

编码快乐!

尝试将server.js中的代码更改为-

app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: true,
      publicPath: config.output.path
    }));

在react中加载本地图像的最佳方法如下所示

例如,保持你所有的图像(或任何资产,如视频,字体)在公共文件夹,如下所示。

只需编写<img src='/assets/images/Call.svg' />即可从任何react组件访问Call.svg图像

注意:保持你的资产在公共文件夹确保,你可以从项目的任何地方访问它,只需给'/path_to_image',不需要任何路径遍历'../../'像这样

我也想补充一下@Hawkeye Parker和@Kiszuriwalilibori的回答:

正如这里的文档所指出的,通常最好根据需要导入图像。

然而,我需要动态加载许多文件,这导致我把图像放在公共文件夹(也在README中声明),因为下面的文档建议:

Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases: You need a file with a specific name in the build output, such as manifest.webmanifest. You have thousands of images and need to dynamically reference their paths. You want to include a small script like pace.js outside of the bundled code. Some library may be incompatible with Webpack and you have no other option but to include it as a tag.

希望这能帮助到其他人!如果我需要澄清任何问题,请给我留言。

另一种做法是:

首先,安装这些模块:url加载器、文件加载器

使用npm: npm install——save-dev url-loader file-loader

接下来,把这个添加到你的Webpack配置中:

module: {
    loaders: [
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }

limit:字节限制内联文件作为数据URL

你需要安装这两个模块:url加载器和文件加载器

最后,你可以这样做:

<img src={require('./my-path/images/my-image.png')}/>

你可以在这里进一步研究这些加载器:

url-loader: https://www.npmjs.com/package/url-loader

file-loader: https://www.npmjs.com/package/file-loader