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

Question

使用带有 Webpack + Encore + Yarn 的 Symfony 4，我想在我的模板中处理图像，但我不知道如何实现。

我把我的图片放在我的 /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 文件。

我的问题是，有没有办法 link Symfony asset() 对文件名中包含哈希的文件名起作用？或者我应该使用其他方式在我的模板中使用图像吗？

Answer 1

您似乎启用了版本控制 .enableVersioning() ，每次您运行 yarn run encore dev 一个 manifest.json 文件应该在你的输出路径中创建，根据你的问题这个路径是/public/build。所以你必须在你的设置中添加以下配置

config/packages/framework.yaml

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

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

您可以在 symfony 文档中找到此信息 here

Answer 2

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

在 twig 中，像往常一样使用这些图像 {{ asset(path_in_public) }}。

如果您为热重载启用开发服务器

$ yarn encore dev-server

来自 /assets/images 的文件将在 twig 模板中可用，即使 /public 中没有物理副本。

文件将在您执行时进行物理复制

$ yarn encore prod

Symfony 4 webpack + encore handle image in template