Блог

Я пытаюсь заставить изображение правильно загружаться на моей главной странице, но по какой-то причине оно продолжает выдавать мне сообщение об ошибке.

Вот HTML, который я использую для этого в настоящее время

 <section class="about-section">
    <div class="container">
        <div>
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida neque elit, vel gravida nibh hendrerit eget. Integer pharetra risus in lorem luctus, vitae porta neque lobortis. Sed vel laoreet ante, sed porttitor risus. Pellentesque tincidunt imperdiet ante sit amet aliquet. Etiam non ligula id diam hendrerit venenatis. Sed accumsan in mi eu pulvinar. Mauris vel fermentum quam.</p>
        </div>
        <img src="./../../images/armoryabout.png" alt="Images of Conan Bases">
    </div>
</section>
  

Я использую немного пользовательскую среду, используя Express, EJS и Webpack (я планирую использовать React для функции), поэтому я также включу код для них.

server.js

 const path = require( 'path' );
const express = require( 'express' );
const webpack = require( 'webpack' );
const webpackDevMiddleware = require( 'webpack-dev-middleware' );
const expressLayouts = require( 'express-ejs-layouts' );

const app = express();
const config = require( './webpack.config.js' );
const compiler = webpack( config );

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use( webpackDevMiddleware( compiler, {
    publicPath: config.output.publicPath,
    noInfo: true
} ) );

app.use( require( "webpack-hot-middleware" )(compiler) );

app.set( 'views', path.join( __dirname, './src/views/' ) );
app.use( express.static( './dist/' ) );
//app.set( 'layout', './src/views/layout.ejs' );
app.set( 'view engine', 'ejs' );
app.use( expressLayouts );

app.get( '/', ( req, res ) => {
    res.render( 'pages/index' );
} );

app.get( '/armory', ( req, res ) => {
    res.render( 'pages/armory' );
} );

// Serve the files on port 3000.
app.listen( 3000, function() {
    console.log( 'Example app listening on port 3000!n' );
} );
  

webpack.config.js

 const path = require( 'path' );
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
const webpack = require('webpack');
const HtmlCriticalWebpackPlugin = require( 'html-critical-webpack-plugin' );

const mode = process.env.NODE_ENV || 'development';
const isDev = mode === "development";

let config = {
    mode: 'development',
    entry: [
        './src/scripts/app.js',
        'webpack-hot-middleware/client'
    ],
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        host: '192.168.1.122'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new CleanWebpackPlugin( {
            cleanStaleWebpackAssets: false
        } ),
        new MiniCssExtractPlugin( {
            filename: 'styles.css',
            chunkFilename: '[id].css'
        } ),
        new HtmlWebpackPlugin( {
            template: './src/views/pages/index.ejs',
            filename: 'index.html',
            inject: true,
            excludeChunks: [ 'server' ]
        } ),
        new HtmlWebpackPlugin( {
            template: './src/views/pages/armory.ejs',
            filename: 'armory.html',
            inject: true,
            excludeChunks: [ 'server' ]
        } ),
    ],
    output: {
        filename: '[name].js',
        path: path.resolve( __dirname, 'dist' ),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-transform-runtime']
                    }
                }
            },
            {
                test: /.ejs$/,
                use: [
                    {
                        loader: 'ejs-loader', // I have a suspicion this could be causing my issue
                        options: {
                            esModule: false
                        }
                    }
                ]
            },
            {
                test: /.html$/,
                use: [
                    'html-loader'
                ]
            },
            {
                test: /.css$/,
                loader: [
                    isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /.scss$/,
                exclude: /node_modules/,
                use: [
                    isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /.(png|svg|jpe?g|gif|webp)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'images',
                            name: '[name].[ext]'
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            bypassOnDebug: true,
                            disable: true
                        }
                    }
                ],
            }
        ]
    }
};

!isDev ? config.plugins.push(
    new HtmlCriticalWebpackPlugin( {
        base: path.join(path.resolve( __dirname), './dist'),
        src: 'index.html',
        dest: 'index.html',
        inline: true,
        minify: true,
        extract: true,
        width: 1920,
        height: 1080,
        penthouse: {
            blockJSRequests: false
        }
    } )
) : null;

module.exports = config;
  

Мне было интересно, знает ли кто-нибудь, в чем моя проблема?

Должен быть другой express.static указатель на images каталог:

 app.use( express.static( '/path/to/images/' ) );
  

Итак, поскольку я использую промежуточное программное обеспечение Webpack для обслуживания своих файлов из памяти, мне пришлось указать Express на мою папку ./src/ вместо моей папки./ dist/. Таким образом, он обслуживает любые ресурсы, которые мне нужны в моих шаблонах EJS.

 app.set( 'views', path.join( __dirname, './src/views/' ) );
//app.use( express.static( './dist/' ) ); - Wrong
app.use( express.static( 'src' ); - Correct
app.set( 'view engine', 'ejs' );
app.use( expressLayouts );