如何处理Symfony 4中的资产

我正在使用

Symfony 4

构建一个应用程序，我希望遵循以下步骤。我为SCS和JS使用Encore/Webpack，效果很好；生成的JS+CSS很好地存储在/public/build文件夹中。我被困在如何存储和使用静态资产，如图像、电影、声音

图像应该存储在“公共/图像”文件夹还是“资产/图像”文件夹中？

以及一些后续问题：

如果图像存储在

public/images

中，如果我使用

asset（“…”）

调用污染模板，我会得到任何好处吗

如果图像存储在

资产/images

中，则：

• 如何将它们移动到

  public/images

  以通过http提供服务

  /bin/console assets:install

  没有执行任何操作，说：“[OK]任何捆绑包都没有提供任何资产。”
• 如何在SCS中使用它们？通过相对路径

问候,

图像应该存储在“公共/图像”文件夹还是“资产/图像”文件夹中

public/

中的所有内容都可以通过浏览器获得。在这里，只有生产准备和构建的东西应该被放置。 由于您的图像不需要任何处理（我假设），您确实可以（应该）将图像放在那里

现在，假设您需要进行一些处理（例如丑陋的JPEG压缩），您可以将图像放入

资产/

，进行一些处理，然后仅将处理后的图像放入

公共/

如果图像存储在public/images中，如果我使用资产（“…”）调用污染模板，我会得到任何好处吗

---

是的，

asset（）

与Encore或资产构建管理无关。它唯一能做的就是修复你的URL。这意味着，如果您将应用程序移动到服务器上的子目录（

example.com/app/

），URL将自动调整。请阅读文档中的更多信息。

使用Symfony 4中的

asset（）

方法引用图像的另一个好方法是在使用Encore构建资产时复制

public/build

中的图像

在网页包Encore中使用copyFiles（） Webpack Encore提供了一个功能，可以将您的图像复制到公共目录中，以允许

asset（）

访问这些文件：

在

webpack.config.js中

Encore.
...
.copyFiles({
        from: './assets/images',
        to: 'images/[path][name].[ext]',
        pattern: /\.(png|jpg|jpeg)$/
    })

错误：Encore.copyFiles不是可识别的属性或方法。
请确保您实际使用的是
symfony/webpack encore bundle
，而不是
symfony/webpack encore pack
如上所述

My
package.json

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.22.0",
        "bootstrap": "^4.1.3",
        "node-sass": "^4.10.0",
        "sass-loader": "^7.0.1",
        "url-loader": "^1.0.1",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

之后编辑webpack.config.js

安可
.setOutputPath（“../build/”）

添加以下行。您还可以通过取消注释行来进行更多配置

.enableVersioning()
.copyFiles({
 from: './assets/images',

 // optional target path, relative to the output dir
 to: 'images/[path][name].[ext]',

 // if versioning is enabled, add the file hash too
 //to: 'images/[path][name].[hash:8].[ext]',

 // only copy files matching this pattern
 //pattern: /\.(png|jpg|jpeg)$/
})


现在您可以通过以下方式使用图像：


资料来源：
详细信息：
我认为这应该是自2018年10月19日该功能被合并以来的公认答案
.enableVersioning()
.copyFiles({
 from: './assets/images',

 // optional target path, relative to the output dir
 to: 'images/[path][name].[ext]',

 // if versioning is enabled, add the file hash too
 //to: 'images/[path][name].[hash:8].[ext]',

 // only copy files matching this pattern
 //pattern: /\.(png|jpg|jpeg)$/
})