Holder.js image is not rendered in Symfony project

Question

I've created a Symfony 4 project with Encore Webpack included. The template of the micro post page from my project is given below. As You can see, I'm using holder.js to display image placeholders, but they are not displaying at all.

{% extends 'base.html.twig' %}

{% block body %}
    {% for post in posts %}
        <div class="media text-muted pt-3">
            <img data-src="holder.js/32x32?text=MJ&bg=e83e8c&fg=fff&size=8" alt="" class="mr-2 rounded">
            <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                <span class="d-block"><strong class="text-gray-dark">@username</strong> <small>{{ post.time|date("d/m/y") }}</small></span>
                {{ post.text }}
            </p>
        </div>
    {% endfor %}
{% endblock %}

The page is rendered without images

webpack.config.js

    .addEntry('app', [
        './node_modules/jquery/dist/jquery.slim.js',
        './node_modules/popper.js/dist/popper.min.js',
        './node_modules/bootstrap/dist/js/bootstrap.min.js',
        './node_modules/holderjs/holder.min.js'
        ])
    .addStyleEntry('css/app', [
        './node_modules/bootstrap/dist/css/bootstrap.min.css',
        './assets/css/app.css'
    ])

score 1 · Accepted Answer · answered Feb 01 '19 at 10:39

Wrong path to app.js was given - build\js\app.js. Solved by adding a valid app.js path to the base template:

base.html.twig

...

{% block javascripts %}
    <script src="{{ asset('build/app.js') }}"></script>
{% endblock %}

</body>

D_Breedt · Answer 2 · 2019-01-30T12:05:08.513

Everything looks fine, but you didn't include the entire webpack config. Just make sure the following line is commented out in your webpack.config.js file:

//.enableSingleRuntimeChunk()

Once this is done, run encore again, and holder should then render the images properly.

vagrant@homestead:~/badland-retail$ ./node_modules/.bin/encore dev

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

Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// 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
 *
 * Add 1 entry for each "page" of your app
 * (including one that's included on every page - e.g. "app")
 *
 * Each entry will result in one JavaScript file (e.g. app.js)
 * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
 */
.addEntry('js/app',
    [
        './node_modules/jquery/dist/jquery.slim.js',
        './node_modules/popper.js/dist/popper.min.js',
        './node_modules/bootstrap/dist/js/bootstrap.min.js',
        './node_modules/holderjs/holder.min.js'
    ])

.addStyleEntry('css/app', [
    './node_modules/bootstrap/dist/css/bootstrap.min.css',
    './assets/css/app.css'
    ])

// 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())

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

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

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

// uncomment if you use API Platform Admin (composer req api-admin)
//.enableReactPreset()
//.addEntry('admin', './assets/js/admin.js')
;

module.exports = Encore.getWebpackConfig();

I've commented out this line and ran the command you specified, but It takes no effect. — , Jan 30 '19 at 10:52
I edited my answer with my webpack.config.js, which is working fine for me. Also, make sure your web and app directories in the symfony plugin are set correctly, this was also a setback for me when I did this course. `In settings:` `Languages and Framworks -> PHP -> Symfony` My App dir is 'bin', and my web dir is public — D_Breedt, Jan 30 '19 at 12:17
but why PHPStorm default folders are `app` and `web`? I'm running my project in Vagrant + VirtualBox on Ubuntu 18.04 VM. I'm not sure that it helps. Thanks for an advice, I'll notice you if it will helps — , Jan 30 '19 at 12:21
I am too, I believe we're doing the same course. There are a few things left out of the course content that could have saved all of us a lot of troubleshooting, Perhaps these things were left out for the students to engage with eachother, or the course creator simply just forgot. Also, my guess is that those defaults are for older versions of symfony, and symfony 4 is structured differently. I don't recall PHPStorm asking me which version I was using, so my take is that it just guesses. At this point, my app is working fine, I'm willing to push my code to github if you would like to compare — D_Breedt, Jan 30 '19 at 12:24
I've edited my webpack configs but It still does not render the image placeholders — , Feb 01 '19 at 07:17
Maybe compare yours to mine here: https://github.com/DowayneB/sf4course — D_Breedt, Feb 01 '19 at 07:40

Holder.js image is not rendered in Symfony project

2 Answers2