# Webpack dev-server doesn't show the image
**URL:** https://forum.kirupa.com/t/webpack-dev-server-doesnt-show-the-image/638578
**Category:** web dev
**Created:** [August 4, 2018, 8:41pm UTC](https://forum.kirupa.com/t/webpack-dev-server-doesnt-show-the-image/638578 "2018-08-04T20:41:50Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@kayut](https://forum.kirupa.com/u/kayut)
#### Post date: [August 4, 2018, 8:41pm UTC](https://forum.kirupa.com/t/webpack-dev-server-doesnt-show-the-image/638578/1 "2018-08-04T20:41:51Z")
Hi,
I’m trying to understand how webpack is working. For this I created a very simple example:
webpack.config.js
```auto
const path = require('path');
module.exports = {
entry: ['./src/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '/',
},
devtool: 'source-map',
};
```
index.html
```auto
```
As you can see the index.html is inside the dist folder. If I open the index.html in browser, it shows the images. But if I run the dev-server, it starts the browser, shows the index.html but cannot find the image. And the console shows this error:
Failed to load resource: The server responded with a status of 404. lion.png
Does any one know why webpack cannot show the image?
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [August 4, 2018, 11:49pm UTC](https://forum.kirupa.com/t/webpack-dev-server-doesnt-show-the-image/638578/2 "2018-08-04T23:49:41Z")
I’m not 100% sure, but when you are running the dev-server, the file arrangement is different than what you see in your project structure. Dev-server only looks at the contents of your **dist** folder. You will not have access to any folders outside of it unless they are created inside the **dist** folder as well.
Your browser doesn’t have that limitation when opening index.html directly from the file system. That’s why pointing the browser directly to index.html works.
🗞
