我正在构建一个小型反应应用程序,我的本地图像将无法加载.像placehold.it/200x200这样的图像加载.我想也许它可能是服务器的东西？github上的完整源代码.

这是我的App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            

                

                    

                        
foo
                    
                    

                        

                            Vzd?lání
                        
                        
                    
                
            
        );
    }
}

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

小智.. 199

使用Webpack时,您需要使用require图像以便Webpack处理它们,这可以解释为什么外部图像加载而内部图像不加载,因此您需要使用替换image-name.png并为每个图像添加正确的图像名称.这样Webpack就能够处理和替换源img.

1> 小智..：

---

使用Webpack时,您需要使用require图像以便Webpack处理它们,这可以解释为什么外部图像加载而内部图像不加载,因此您需要使用替换image-name.png并为每个图像添加正确的图像名称.这样Webpack就能够处理和替换源img.

---

收到错误：`找不到模块：错误：无法解析'C：... \ app \ components \ images'中的'MyPNG.png'。该文件的路径看起来不错！

2> Hawkeye Park..：

---

我开始使用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 ;
}

export default Header;

这对我很有用.这是一个指向README的主文档的链接,其解释(摘录):

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

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

3> fandro..：

---

另一种方法:

首先,安装这些模块: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

最后,你可以这样做:

您可以在此处进一步调查这些装载机:

url-loader:https://www.npmjs.com/package/url-loader

file-loader:https://www.npmjs.com/package/file-loader