我正在构建一个小的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');
});

当前回答

有时你可以输入而不是在你的图像位置/src: 试一试

./assets/images/picture.jpg

而不是

../assets/images/picture.jpg

其他回答

当使用Webpack时,你需要需要图像以便Webpack处理它们,这就解释了为什么外部图像加载而内部不加载,所以你需要使用<img src={"/images/ restto .png"} />,而不是<img src={require('/images/image-name.png')} />替换image-name.png,为它们每个正确的图像名称。这样Webpack就能够处理和替换源img。

我也想补充一下@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.

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

我是这样解决的。

所以我只有在映射多个图像的数组时才会遇到这个问题。通常使用import import artist3 from './../../ assets/images/cards_images/artists/artist3.png';它工作得很好,但问题是当循环多个图像形成一个数组。

我分享的是我用来解决这个问题的方法。

以前-----我使用imageurl: 'your_image_url.png'

------在我的数组中,我将imageurl: require('your_image_url。png')

  const artists = [
{firstname: 'Trevor', lastname: 'Bowman', imageurl: require('./../../assets/images/cards_images/artists/artist1.png') },
{firstname: 'Julia', lastname: 'Deakin', imageurl: require('./../../assets/images/cards_images/artists/artist2.png') },
{firstname: 'Stewart', lastname: 'Jones', imageurl: require('./../../assets/images/cards_images/artists/artist3.png') },
{firstname: 'Arsene', lastname: 'Lupin', imageurl: require('./../../assets/images/cards_images/artists/artist1.png') },

 ]

现在,在另一个组件中,我使用这些数据来循环我绑定到image src的艺术家,如下所示

<img src={artist.imageurl.default} className="artists__content——image br-08" alt={'img'+index} />

因为当你输入require()时,你得到的是Module对象,它有一个默认属性,它有我们的url(截图附在下面)

所以。default这个东西是在require()之后访问url的一个额外的东西

我正在开发一个使用SSR的项目,现在我想在这里分享我的解决方案。

我的目标是预加载图像显示它时,互联网连接离线。(这可能不是最好的做法,但因为它对我有用,现在还可以) 供参考,我在这个项目中也使用ReactHooks。

  useEffect(() => {
    // preload image for offline network
    const ErrorFailedImg = require('../../../../assets/images/error-review-failed.jpg');
    if (typeof window !== 'undefined') {
      new Image().src = ErrorFailedImg;
    }
  }, []);

为了使用图像,我这样写

<img src="/assets/images/error-review-failed.jpg" />

我也面临着同样的问题,我已经想出了这个解决方案,它就像魔法一样有效。 src={${window.location.origin.toString()}/${这里的图像名称}}