Symfony 4 webpack + encore处理模板中的图像

时间:2017-12-31 11:19:08

标签: symfony webpack webpack-encore

将Symfony 4与Webpack + Encore + Yarn一起使用,我想在我的模板中处理图像,而我真的不知道如何实现这一点。

我将我的图片放在/assets/img/logo.png文件夹中,并在webpack.config.js中使用此内容:

.addEntry('logo', './assets/img/logo.png')

在我跑完之后:

yarn run encore dev

哪个生成/public/build/logo.js/public/build/images/logo.aez323a.png个文件。

我的问题是,有没有办法将Symfony asset()函数与文件名中的哈希链接到文件名?或者我应该使用其他方式在我的模板中使用图像?

2 个答案:

答案 0 :(得分:10)

您似乎已启用版本控制.enableVersioning(),每次运行yarn run encore dev时,应根据您的问题在输出路径中创建 manifest.json 文件此路径为 / public / build 。因此,您必须在设置中添加以下配置

<强>配置/包/ framework.yaml

framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

然后,您将能够使用asset()函数引用按名称asset('public/images/logo.png')

您可以在symfony文档here

中找到此信息

答案 1 :(得分:0)

现在有copyFiles-官方的encore插件: https://symfony.com/doc/current/frontend/encore/copy-files.html

简而言之,您将图像放在/ assets / images(或其他任何图像)中,在构建时插件将此文件夹复制到具有相同子文件夹结构的/ public / build中。您需要做的就是在/webpack.config.js中添加一些字符串-使用“ from”和“ to”变量激活插件。

在树枝中,将这些图像照常与{{asset( path_in_public )}}一起使用。

如果启用开发服务器进行热重载

$ yarn encore dev-server
比/ assets / images中的文件要多,即使在/ public中没有物理副本,也可以在树枝模板中使用它们。

执行时,文件将被物理复制

$ yarn encore prod