我正在构建一个小的react应用程序,我的本地图像不会加载。图像就像占位符。它/ 200 x200型负载。我想可能是服务器的问题?

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

当前回答

另一种做法是:

首先,安装这些模块:url加载器、文件加载器

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

接下来,把这个添加到你的Webpack配置中:

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

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

你需要安装这两个模块:url加载器和文件加载器

最后,你可以这样做:

<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

其他回答

以下是对我有效的方法。首先,让我们了解这个问题。不能使用变量作为require的参数。Webpack需要知道在编译时要捆绑什么文件。

When I got the error, I thought it may be related to path issue as in absolute vs relative. So I passed a hard-coded value to require like below: <img src={require("../assets/images/photosnap.svg")} alt="" />. It was working fine. But in my case the value is a variable coming from props. I tried to pass a string literal variable as some suggested. It did not work. Also I tried to define a local method using switch case for all 10 values (I knew it was not best solution, but I just wanted it to work somehow). That too did not work. Then I came to know that we can NOT pass variable to the require.

作为一种解决方法,我已经修改了数据中的数据。Json文件来限制它只是我的图像的名字。这个图像名称是来自于道具的字符串文字。我将它连接到硬编码的值,如下所示:

import React from "react";

function JobCard(props) {  

  const { logo } = props;
  
  return (
      <div className="jobCards">
          <img src={require(`../assets/images/${logo}`)} alt="" /> 
      </div>
    )
} 
  

标识中包含的实际值将来自数据。Json文件,会引用一些图像名称,比如photosnap。svg。

您必须先导入映像,然后再使用它。这对我很管用。


import image from '../image.png'

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


我是这样解决的。

所以我只有在映射多个图像的数组时才会遇到这个问题。通常使用import import artist3 from './../../ assets/images/cards_images/artists/artist3.png';它工作得很好,但问题是当循环多个图像形成一个数组。

我分享的是我用来解决这个问题的方法。

以前-----我使用imageurl: 'your_image_url.png'

------在我的数组中,我将imageurl: require('your_image_url。png')

  const artists = [
{firstname: 'Trevor', lastname: 'Bowman', imageurl: require('./../../assets/images/cards_images/artists/artist1.png') },
{firstname: 'Julia', lastname: 'Deakin', imageurl: require('./../../assets/images/cards_images/artists/artist2.png') },
{firstname: 'Stewart', lastname: 'Jones', imageurl: require('./../../assets/images/cards_images/artists/artist3.png') },
{firstname: 'Arsene', lastname: 'Lupin', imageurl: require('./../../assets/images/cards_images/artists/artist1.png') },

 ]

现在,在另一个组件中,我使用这些数据来循环我绑定到image src的艺术家,如下所示

<img src={artist.imageurl.default} className="artists__content——image br-08" alt={'img'+index} />

因为当你输入require()时,你得到的是Module对象,它有一个默认属性,它有我们的url(截图附在下面)

所以。default这个东西是在require()之后访问url的一个额外的东西

试试这个

如果你的图像SRC是

src="dist/img/logo.jpg"

添加. ./喜欢

src="../dist/img/logo.jpg"

在react中加载本地图像的最佳方法如下所示

例如,保持你所有的图像(或任何资产,如视频,字体)在公共文件夹,如下所示。

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

注意:保持你的资产在公共文件夹确保,你可以从项目的任何地方访问它,只需给'/path_to_image',不需要任何路径遍历'../../'像这样