我正在构建一个小的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');
});
以下是对我有效的方法。首先，让我们了解这个问题。不能使用变量作为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。
我也想补充一下@Hawkeye Parker和@Kiszuriwalilibori的回答:
正如这里的文档所指出的，通常最好根据需要导入图像。
然而，我需要动态加载许多文件，这导致我把图像放在公共文件夹(也在README中声明)，因为下面的文档建议:
Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases:
You need a file with a specific name in the build output, such as manifest.webmanifest.
You have thousands of images and need to dynamically reference their paths.
You want to include a small script like pace.js outside of the bundled code.
Some library may be incompatible with Webpack and you have no other option but to include it as a tag.
希望这能帮助到其他人!如果我需要澄清任何问题，请给我留言。
我是这样解决的。
所以我只有在映射多个图像的数组时才会遇到这个问题。通常使用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的一个额外的东西
