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

当前回答

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

其他回答

以下是我的做法: 如果你使用npx create-react-app来设置你的react,你需要从你想要使用它的组件的文件夹中导入图像。这只是从它们的文件夹导入其他模块的方法。

所以,你需要写:

import myImage from './imageFolder/imageName'

然后在JSX中,您可以有这样的内容:<image src = {myImage} />

请看下面的截图:

我只是想留下以下内容,以加强上面接受的答案。

除了公认的答案之外,您还可以在Webpack中指定别名路径,这样您就不必担心图像相对于当前所在文件的位置。请看下面的例子:

Webpack file:

module.exports = {
  resolve: {
    modules: ['node_modules'],
    alias: {
      public: path.join(__dirname, './public')
    }
  },
}

Use:

<img src={require("public/img/resto.ong")} />

您必须先导入映像,然后再使用它。这对我很管用。


import image from '../image.png'

const Header = () => {
   return (
     <img src={image} alt='image' />
   )
}


src={"/images/resto.png"}

以这种方式使用src属性意味着,您的图像将从网站的绝对路径“/images/ restto .png”加载。图像目录应该位于站点的根目录。例子: http://www.example.com/images/resto.png

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

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

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

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