我正在构建一个小的react应用程序,我的本 map 像无法加载.像是placehold.it/200x200次装载.我想可能是服务器的问题?

这是我的应用程序.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;

指数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')
);

还有服务器.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时,你需要使用require个图像才能让Webpack处理它们,这就解释了为什么外部图像加载而内部图像不加载,所以你需要使用<img src={require('/images/image-name.png')} />代替<img src={"/images/resto.png"} />来替换图像名称.使用正确的图像名称为每一个png.这样Webpack就可以处理和替换源img.

Reactjs相关问答推荐

如何使用React防止并发注册并处理Firestore数据库中的插槽可用性

使用setInterval判断数据的时间,然后在过期后从对象中删除;遇到性能问题

无法在jest中发布行动

有没有可能在next.js和ssr中使用tsps?

试图从Amazon-Cogito-Identity-js模拟CogitoUser.authateUser,并将其获取为未定义的S

状态更改是否卸载功能组件

计数器递增 2 而不是 1

如何在使用 React Router v6 将当前页面的状态传递给上一页的同时导航到上一页?

将外部 JavaScript 导入 React(通过文件)

onChange in useEffect 的最佳实践

cypress `cy.now()` Type 'Promise' 没有调用签名

在按钮单击中将动态参数传递给 React Query

React Native应用如何订阅Supabase的实时数据?

React 测试库 - 如何断言异步函数之间的中间状态?

如何禁用 redux-toolkit 的不可序列化值测试警告?

在 redux 中分派到另一个减少时状态值不会改变

如何使图标适合 react-bootstrap 中的行元素

如何使用react 路由将 url 参数限制为一组特定的值?

在 Reactjs 中状态发生变化时渲染一个新组件而不替换旧组件

为什么 state redux-toolkit 是代理?