CODEWITHSUNDEEP
urlwebpacksasssymfony4webpack-encore
MatAle Albiach
MatAle Albiach

Reputation: 95

Encore webpack or assets generating wrong path to image in symfony 4

I am trying to learn to use encore webpack. Well, following this guideEncore + webpack + bootstrap sass and this guide Symfony 4+ enconre + Bootstrap 4 I got symfony to use the scss and js assets I use. But the problem is when I insert an image in my scss code (for a bg) the relative url I see in the browser is wrongly generated.

Webpack is generating the image here:

public\build\images\2.f26e9a05.jpg

But the url in the browser ends up like this:

/public/build/build/images/2.f26e9a05.jpg

(if I delete the second "build/" the image loads like it should) this is my folder estructure:

assets:
   css:
     app.scss
   js:
     app.js
public:
   images:
     2.jpg

app.scss:

@import '~bootstrap/scss/bootstrap';
...
.parallax {
background-image: url("images/2.jpg");
}

Webpack.config.js:

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

Encore
// the project directory where compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('build')
// the public path you will use in Symfony's asset() function - e.g. asset('build/some_file.js')
.setManifestKeyPrefix('build/')

.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())

// the following line enables hashed filenames (e.g. app.abc123.css)
//.enableVersioning(Encore.isProduction())

// uncomment to define the assets of the project
.addEntry('app', './assets/js/app.js')
//.addStyleEntry('css/app', './assets/css/app.scss')

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

// uncomment if you use Sass/SCSS files
.enableSassLoader()

// uncomment for legacy applications that require $/jQuery as a global variable
.autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

index.html.twig:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}100Monos{% endblock %}</title>
    {% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('build/app.css') }}">
    {% endblock %}
</head>
<body>

    <div class="container">
    {% block body %}
    <div id="Nosotros" class="pantalla d-flex align-items-center parallax">
        <div class="contenido">
            <h1>100Monos</h1>
            <h3>Nuestra Web es mala porque pasamos todo el tiempo haciendo la suya</h3>
            <img src="{{ asset('images/1.jpg') }}">             
        </div>
    </div>

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

Upvotes: 3

Views: 6158

Answers (2)

Thomas Lange
Thomas Lange

Reputation: 43

I am responding to this rather old question, because I assume some things have changed in the meantime concerning yarn watch and the setting of the public path:

If I do a:

.setPublicPath('./')

yarn watch feels offended, and shows a:

WARNING The value passed to setPublicPath() should *usually* start with "/" or be a full URL (http://...). If you're not sure, then you should probably change your public path and make this message disappear..

So I think the way this is meant to be is more like this:

Encore

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

    // public path used by the web server to access the output path
    .setPublicPath('/public/build')

    // only needed for CDN's or sub-directory deploy
    .setManifestKeyPrefix('public/build/')

So the public path should still be absolute while the "manifest prefix" takes care of the set up as a subdirectory.

Information on this can be found here:

Just added this for correctness, as I stumbled over it and others might as well...

Upvotes: 3

MatAle Albiach
MatAle Albiach

Reputation: 95

I resolved it at the end, after testing many things. There was 2 problem I kept repeating. First, the path was generated in a not relative way, solve it changing webpack with this:

    .setPublicPath('./')

But then the scss didn't load, what happen? Well, the prefix was the problem, because when you put the prefix in the asset function it takes the prefix and change it for the public path... so I changed the prefix for 

    .setManifestKeyPrefix('webpack/')

(something random really)

Upvotes: 2

Related Questions