React不会加载本地图像

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

当前回答

哦，是的，几分钟前我也遇到了同样的问题，这对我来说很有效:

import React from "react" import logo from "../images/logo.png"

export default function Navbar() {
    return(
        <nav>
            {/* <img className="nav--logo" src="../images/logo.png"/> */}
            <img className="nav--logo" src={logo} alt="logo"/>
        </nav>
    ) }

2022-02-07 08:51:42

其他回答

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

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

2018-09-06 01:09:33

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

2016-01-04 02:16:14

我开始用Create -react-app构建我的应用程序(参见“创建一个新应用程序”选项卡)。README。附带的Md给出了这个例子:

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

这对我来说非常有效。下面是该README的主文档链接，其中解释了(摘录):

...You can import a file right in a JavaScript module. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF. To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png...

2017-08-05 21:50:35

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

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

Webpack file:

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

Use:

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

2018-08-19 04:54:30

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

2021-07-06 18:11:36

React不会加载本地图像

推荐文章

最新文章

标签