Symfony and Webpack Image in production-CodePudding

I installed webpack on my symfony project. I do not understand the system of images and versioning, for example in the site there is a blog, and when I create a new blog post I must necessarily execute npm run dev for after having access to the new image via the folder build. How to make this happen automatically without having to run the command each time?

const Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')

    .copyFiles({
        from: './assets/images',

        // optional target path, relative to the output dir
        to: 'images/[path][name].[ext]',

        // if versioning is enabled, add the file hash too
        //to: 'images/[path][name].[hash:8].[ext]',

        // only copy files matching this pattern
        //pattern: /\.(png|jpg|jpeg)$/
    })

    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    .setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */

    //Main JS
    .addEntry('app', './assets/js/app.js')
    .addEntry('functions', './assets/js/functions.js')
    .addEntry('themepunchrevolution', './assets/rs-plugin/js/jquery.themepunch.revolution.js')
    .addEntry('cookieBar', './assets/js/jquery.cookiebar.js')


    //Main Css
    .addEntry('style', './assets/styles/style.css')
    .addEntry('blog', './assets/styles/blog.css')
    .addEntry('custom', './assets/styles/custom.css')
    .addEntry('extralayers', './assets/styles/extralayers.css')
    .addEntry('finaltilesgallery', './assets/styles/finaltilesgallery.css')
    .addEntry('flavr', './assets/styles/flavr.min.css')
    .addEntry('lightbox2', './assets/styles/lightbox2.css')
    .addEntry('owl_video', './assets/styles/owl.video.play.png')
    .addEntry('shop', './assets/styles/shop.css')
    .addEntry('timeline', './assets/styles/timeline.css')
    .addEntry('setting', './assets/rs-plugin/css/settings.css')
    .addEntry('setting_ie8', './assets/rs-plugin/css/settings-ie8.css')
    .addEntry('vendors', './assets/styles/vendors.unminified.css')
    .addEntry('bootstrap_css', './assets/styles/bootstrap.min.css')

    //Admin CSS
    .addEntry('app_css', './assets/styles/app.css')
    .addEntry('admin', './assets/styles/admin.css')
    .addEntry('default', './assets/styles/default-css.css')
    .addEntry('metisMenu_css', './assets/styles/metisMenu.css')
    .addEntry('responsive', './assets/styles/responsive.css')
    .addEntry('slicknav_css', './assets/styles/slicknav.min.css')
    .addEntry('styles', './assets/styles/styles.css')
    .addEntry('typography', './assets/styles/typography.css')
    .addEntry('themify', './assets/styles/themify-icons.css')


    //preHome
    .addEntry('preHome', './assets/styles/style_preHome.css')

    .copyFiles([
        {from: './node_modules/ckeditor4/', to: 'ckeditor/[path][name].[ext]', pattern: /\.(js|css)$/, includeSubdirectories: false},
        {from: './node_modules/ckeditor4/adapters', to: 'ckeditor/adapters/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/lang', to: 'ckeditor/lang/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/plugins', to: 'ckeditor/plugins/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/skins', to: 'ckeditor/skins/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/vendor', to: 'ckeditor/vendor/[path][name].[ext]'}
    ])

    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
    .enableStimulusBridge('./assets/controllers.json')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment if you use React
    //.enableReactPreset()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())
    //.enableVersioning()

    // uncomment if you're having problems with a jQuery plugin
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

CodePudding user response：

You're having this issue because you are storing the user uploaded images under <project dir>/assets. That directory is private by design and not available for a client (browser). Perhaps this is why you added that copyFiles step to your configuration.

Instead of doing that you should store the uploaded images (if you want them available for rendering on a web page) somewhere under <project dir>/public (for example: <project dir>/public/uploads.

Once you do that you'll be able to access them as soon as they are uploaded either specifying the path to them or using the Twig asset function.

Example:

uploaded image is IMG001.jpg
your application stores it under <project dir>/public/uploads/IMG001.jpg
you can access it from your template using {{ asset('uploads/IMG001.jpg') }}
or in plain HTML/JS through src="/uploads/IMG001.jpg"