我正在构建一个小的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');
});
我是这样解决的。
所以我只有在映射多个图像的数组时才会遇到这个问题。通常使用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的一个额外的东西
我开始用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的主文档链接，其中解释了(摘录):
...You can import a file right in a JavaScript module. This tells Webpack
to include that file in the bundle. Unlike CSS imports, importing a
file gives you a string value. This value is the final path you can
reference in your code, e.g. as the src attribute of an image or the
href of a link to a PDF.
To reduce the number of requests to the server, importing images that
are less than 10,000 bytes returns a data URI instead of a path. This
applies to the following file extensions: bmp, gif, jpg, jpeg, and
png...
我将分享我在一个创建-反应-应用程序项目中工作的解决方案:
在同一个images文件夹中包含一个js文件，导出所有的图像，在组件中，你需要的图像导入图像并使用它:)，Yaaah就是它，让我们详细看看
文件夹结构与JS文件
// js file in images folder
export const missing = require('./missingposters.png');
export const poster1 = require('./poster1.jpg');
export const poster2 = require('./poster2.jpg');
export const poster3 = require('./poster3.jpg');
export const poster4 = require('./poster4.jpg');
你可以在你的组件中导入:
import {missing, poster1, poster2, poster3, poster4} from '../../assets/indexImages';
你现在可以使用这个作为SRC to image标签。
编码快乐!
