Nie ładuje mi się img w webpack błąd 404

Question

Witam,

mam problem z webpackem konfiguracja to. 

Konkretnie nie ładują mi się <img/>  wyskakuje błąd w konsoli 

GET http://localhost:3000/public/assets/nutrition-500.jpg 404 (Not Found)

próbowałem prawie wszystkiego włącznie z tutorialami na youtubie 

z góry dziękuje za pomoc.

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry: ['./js/main.js', './sass/style.scss'],

    mode: 'development',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
        publicPath: '/'
    },

    devServer: {
        contentBase: path.resolve(__dirname, 'public'),
        compress: true,
        port: 3000,
        hot: true,
    },

    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'

            },
            {
                test: /\.scss$/,
                use: ['style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [
                    'file-loader',
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            gifsicle: {
                                interlanced: false
                            },

                            optipng: {
                                optimizationLevel: 7
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            },
                            mozjpeg: {
                                progressive: true,
                                quality: 65,
                            }
                        },
                    },
                ]
            },
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new webpack.HotModuleReplacementPlugin(),
    ]

}

moje dependances zainstalowane to 

"devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/preset-env": "^7.6.2",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "css-hot-loader": "^1.4.4",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^6.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.2"
  }

 

Answer 1

GET http://localhost:3000/public/assets/nutrition-500.jpg 404 (Not Found)

jak odwołujesz się do grafik z folderu assets to żądanie powinno iść:

GET http://localhost:3000/assets/nutrition-500.jpg

a w html-u ścieżka do pliku powinna wyglądać tak:

<img src="/assets/nutrition-500.jpg"/>

folder assets z zasobami znajduje się w projekcie w lokalizacji src/app/assets

Comments

Dzięki działa zaoszczędziłeś mi sporo czasu i męczarni ale średnio zrozumiałem dlaczego tak? musiałem coś przeoczyć. Myślałem że to ma być ścieżka względna do głównego katalogu?