Petrba Petrba - 1 year ago 215
React JSX Question

React won't load local images

I am building small react app and my local images won't load. Images like placehold.it/200x200 loads. I thought i could be something with the server? The full source on github.

Here is my 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')
);


and 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 Source

When using Webpack you need to require images in order for Webpack to process them, which would explain why external images load while internal do not, so instead of <img src={"/images/resto.png"} /> you need to use <img src={require('/images/image-name.png')} /> replacing image-name.png w. the correct image for each of them. That way Webpack is able to process and replace the source img.