React不会加载本地图像

Question

我正在构建一个小型反应应用程序,我的本地图像将无法加载.像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');
});

Answer 1

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

Answer 2

我开始使用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将该文件包含在bundle中.与CSS导入不同,导入文件会为您提供字符串值.此值是您可以在代码中引用的最终路径,例如,作为图像的src属性或指向PDF的链接的href.

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

Answer 3

另一种方法:

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

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

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

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

Answer 4

使用默认属性：

<img src={require(`../../assets/pic-${j + 1}.jpg`).default} alt='pic' />

编辑（进一步解释）：

require返回一个对象：

Module {default: "/blah.png", __esModule: true, Symbol(Symbol.toStringTag): "Module"}

然后可以从默认属性中找到图像的路径

Answer 5

在反应中加载本地图像的最佳方法如下

例如，将您的所有图像（或任何资产，如视频、字体）保存在公共文件夹中，如下所示。

只需写入<img src='/assets/images/Call.svg' />即可从任何反应组件访问 Call.svg 图像

注意：将您的资产保存在公共文件夹中可确保您可以从项目的任何位置访问它，只需提供 '/path_to_image' 而不需要像这样的任何路径遍历 '../../'

Answer 6

通过做一个简单的导入，你可以在 React 中访问图像

import logo from "../images/logo.png";
<img src={logo}/>

一切都解决了！只是一个简单的修复 =)

Answer 7

这是我的做法：如果您使用 npx create-react-app 来设置您的反应，您需要从要使用它的组件中的文件夹中导入图像。这就是从其他模块的文件夹中导入其他模块的方式。

所以，你需要写：

import myImage from './imageFolder/imageName'

然后在你的 JSX 中，你可以有这样的东西：<image src = {myImage} />

请参见下面的屏幕截图：

Answer 8

其实我想评论，但我还没有被授权。这就是为什么假装是下一个答案，而事实并非如此。

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" />;

我想继续这条路。当有图片可以简单插入时，这会很顺利。就我而言，这稍微复杂一些：我必须映射几张图片。到目前为止，我发现的唯一可行的方法如下

import upperBody from './upperBody.png';
import lowerBody from './lowerBody.png';
import aesthetics from './aesthetics.png';

let obj={upperBody:upperBody, lowerBody:lowerBody, aesthetics:aesthetics, agility:agility, endurance:endurance}

{Object.keys(skills).map((skill) => {
 return ( <img className = 'icon-size' src={obj[skill]}/> 

所以，我的问题是是否有更简单的方法来处理这些图像？不用说，在更一般的情况下，必须逐字导入的文件数量可能很大，对象中的键数量也可能很大。（该代码中的对象明确涉及通过名称引用 - 它的键）在我的情况下，与 require 相关的程序没有工作 - 加载程序在安装过程中产生了奇怪的错误，并且没有显示任何工作标记；并且 require 本身也不起作用。

Answer 9

您必须先导入图像然后使用它。这对我有用。

import image from '../image.png'

const Header = () => {
   return (
     <img src={image} alt='image' />
   )
}

Answer 10

我也想补充@Hawkeye Parker 和@Kiszuriwalilibori 的答案：

正如此处文档所述，通常最好根据需要导入图像。

但是，我需要动态加载许多文件，这导致我将图像放在公共文件夹中（自述文件中也有说明），因为文档中提出了以下建议：

通常我们建议从 JavaScript 导入样式表、图像和字体。公用文件夹可作为解决许多不太常见情况的方法：

• 您需要在构建输出中具有特定名称的文件，例如manifest.webmanifest。
• 您有数千张图像，需要动态引用它们的路径。
• 您希望在捆绑代码之外包含一个小脚本，例如pace.js。
• 某些库可能与 Webpack 不兼容，您别无选择，只能将其包含为标签。

希望对其他人有帮助！如果我需要澄清其中任何一个，请给我评论。