为了账号安全,请及时绑定邮箱和手机立即绑定

React不会加载本地图像

/ 猿问

React不会加载本地图像

哆啦的时光机 2019-11-11 15:35:40

我正在构建一个小型React应用,并且我的本地图像无法加载。图片如placehold.it/200x200加载。我以为这可能与服务器有关?完整的源代码在github上。


这是我的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');

});


查看完整描述

3 回答

?
呼啦一阵风

使用Webpack时,您需要对require图像进行处理,以便Webpack处理它们,这可以解释为什么外部图像不加载而内部图像加载的原因,因此,<img src={"/images/resto.png"} />您无需<img src={require('/images/image-name.png')} />为每个图像使用正确的图像名称替换image-name.png。这样,Webpack就能处理和替换源img。


查看完整回答
反对 回复 2019-11-11
?
慕姐8265434

我开始使用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的主文档的链接,它解释了(摘录):


...您可以直接在JavaScript模块中导入文件。这告诉Webpack将文件包含在捆绑软件中。与CSS导入不同,导入文件会为您提供一个字符串值。该值是您可以在代码中引用的最终路径,例如,作为图像的src属性或PDF链接的href。


为了减少对服务器的请求数量,导入小于10,000字节的图像将返回数据URI,而不是路径。这适用于以下文件扩展名:bmp,gif,jpg,jpeg和png ...


查看完整回答
反对 回复 2019-11-11
?
拉莫斯之舞

另一种方法是:


首先,安装这些模块:url-loader,file-loader


使用npm: npm install --save-dev url-loader file-loader


接下来,将其添加到您的Webpack配置中:


module: {

    loaders: [

      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }

    ]

  }

limit:内联文件作为数据URL的字节数限制


您需要安装两个模块:url-loader与file-loader


最后,您可以执行以下操作:


<img src={require('./my-path/images/my-image.png')}/>

您可以在此处进一步研究这些装载机:


网址加载程序:https://www.npmjs.com/package/url-loader


文件加载器:https://www.npmjs.com/package/file-loader


查看完整回答
反对 回复 2019-11-11

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信