Symfony 4 webpack +再次在模板中处理图像

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()函数与文件名中的哈希值联系起来？或者我应该使用其他方式来使用我的模板中的图像？

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

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

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

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

如果您启用dev server进行热重新加载

$ yarn encore dev-server

这样，即使在/public中没有物理拷贝，/assets/images中的文件也可以在twig模板中使用。

执行以下命令时，文件将被物理复制

$ yarn encore prod