Q:

import images in webpack 4

hi how can i import images in webpack 4?
Here is my Webpack Config. The image is loaded in the static folder but the name is cryptical. If i want to import it and log it out there is only the string with the filename. How can i use it correctly?

That is how i use it
import img  from "../../../../assets/hallo.png"

<img style = "height: 100px;width: 100px" src="${img}" />

Webpack Config
const path = require('path')
const BrowserSyncPlugin = require("browser-sync-webpack-plugin")
var webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports  ={
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, 'static'),
    filename: 'monitor-bundle.js'

  },
  devtool: 'source-map',
  mode: 'development',

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use: ['css-loader']
          })
      },
      {
        test: /\.(jpg|png)$/,
        use: {
          loader: "file-loader",
        }
      },
    ]
  },
  watch: true,
  plugins: [
    new BrowserSyncPlugin({
      watchOptions: {
        poll: true
      },
        host: "localhost",
        port: "1337",
        proxy: "http://localhost:80/",
        files: ["./static/monitor-bundle.js"],
        open: true,
        reloadDelay: 0,
        reloadDebounce: 0,
        browser: ["chromium", "google chrome"]
    }),
    new ExtractTextPlugin({filename: 'monitor-style.css'})
],
};

A:

You are just passing an empty string as source here.
<img style = "height: 100px;width: 100px" src="${img}" />

You need to use template string if u want to use this ${}
<img style = "height: 100px;width: 100px" src=`${img}` />

In this case you can just do this
 <img style = "height: 100px;width: 100px" src={img} />

