React 不会加载本地图片 [英] React won't load local images

问题描述

我正在构建一个小型 React 应用程序，但我的本地图像无法加载.像 placehold.it/200x200 这样的图像加载.我想可能是服务器的问题?

这是我的 App.js

import React, { Component } from 'react';类 App 扩展组件 {使成为() {返回 (<div className="home-container"><div className="home-content"><div className="home-text"><h1>foo</h1>

<div className="home-arrow"><p className="箭头文本">维兹杰拉尼</p><img src={"/images/resto.png"}/>

);}}导出默认应用程序；

index.js:

import React, { Component } from 'react';从'react-dom'导入{渲染}；从反应路由器"导入{路由器，路由，链接}；从历史"导入 { createHistory };从'./components/app'导入应用程序；让历史 = createHistory();使成为(<路由器历史={历史} ><Route path="/" component={App} ><Route path="vzdelani" component=""/><Route path="znalosti" component=""/><Route path="prace" component=""/><Route path="kontakt" component=""/></路线><Route path="*" component=""/></路由器>,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 编译器 = webpack(config);app.use(require('webpack-dev-middleware')(编译器，{无信息:真实，公共路径: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) {如果(错误){控制台日志(错误)；返回;}console.log('在 http://localhost:3000 监听');});

解决方案

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

I am building a small react app and my local images won't load. Images like placehold.it/200x200 loads. I thought maybe it could be something with the server?

Here is my 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')
);

and 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');
});

解决方案

When using Webpack you need to require images in order for Webpack to process them, which would explain why external images load while internal do not, so instead of <img src={"/images/resto.png"} /> you need to use <img src={require('/images/image-name.png')} /> replacing image-name.png with the correct image name for each of them. That way Webpack is able to process and replace the source img.

这篇关于React 不会加载本地图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！