Symfony 4 webpack + encore如何在模板中处理图片

Question

使用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()函数与包含哈希值的文件名链接起来？还是我应该使用其他方法在模板中使用图像？

- Vincent Decaux

---

我找到了另一种方法。添加CopyPlugin https://dev59.com/1Knka4cB1Zd3GeqPQ50-#49183966 - Anthony Ln

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文档中找到此信息这里

- knetsi

---

非常好的干净的答案，我在文档中没有找到它，是我的错。 - Vincent Decaux

我认为您可能会对关于Webpack-Encore Git存储库的此对话感兴趣：https://github.com/symfony/webpack-encore/issues/24，它涉及使用Webpack处理静态资源。 - knetsi

Answer 2

现在有一个 copyFiles 插件 - 正式支持 encore： https://symfony.com/doc/current/frontend/encore/copy-files.html 简而言之，您可以将图像放在 /assets/images（或其他任何位置），在构建时插件会将此文件夹与相同的子文件夹结构复制到 /public/build 中。您需要做的就是在 /webpack.config.js 中添加一些字符串 - 使用 "from" 和 "to" 变量激活插件。

在 twig 中使用 {{ asset(path_in_public) }} 通常使用这些图像。

如果您启用了热重载的 dev server。

$ yarn encore dev-server

如果/assets/images中的文件没有在/public中进行物理复制，它们也可以在twig模板中使用。

当您执行操作时，文件将被物理复制。

$ yarn encore prod

- Alexander Shubin