我正在使用 Symfony 4 构建一个应用程序，我想关注best practices for web assets . 我使用Encore / Webpack for SCSS和JS，它运行良好;生成的JS CSS很好地存储在/ public / build文件夹中 . 我坚持如何存储和使用静态资产，如图像，电影，声音 .

Should images be stored in 'public/images' folder or in 'assets/images'?

还有一些后续问题：

如果图像存储在 public/images 中，如果我用 asset('...') 调用污染模板，我会获得任何好处吗？

如果图像存储在 assets/images 中，则：

他们如何通过http进入 public/images ？ ./bin/console assets:install 什么也没做，说：'[OK] No assets were provided by any bundle.' .
如何在SCSS中使用它们？通过相对路径？

问候，

2 回答

10

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

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

现在，假设您需要进行一些处理（例如丑陋的JPEG压缩），您可以将图像放在 assets/ 中，进行一些处理，然后只将处理后的图像放在 public/ 中 .

如果图像存储在公共/图像中，如果我使用资产（'...'）调用污染模板，我会获得任何好处吗？

是的， asset() 与Encore或资产构建管理没有任何关系 . 它唯一能做的就是修复您的网址 . 这意味着如果您将应用程序移动到服务器上的子目录（ example.com/app/ ），URL将自动适应 . 在Asset component文档中阅读更多相关信息 .

回复于 2024-05-03T09:14:22+08:00

使用Symfony 4中的 asset() 方法引用图像的另一个好方法是在使用Encore构建资源时复制 public/build 中的图像 .

在Webpack Encore中使用copyFiles（）

Webpack Encore提供了一种在公共目录中复制图像的功能，以允许 asset() 访问这些文件：copyFiles() .

在你的 webpack.config.js

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

错误：Encore.copyFiles不是公认的属性或方法 .

请确保您正在使用 symfony/webpack-encore-bundle 而不是here所描述的 symfony/webpack-encore-pack .

composer require symfony/webpack-encore-bundle
composer remove symfony/webpack-encore-pack
yarn install
yarn upgrade
yarn run watch

我的 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"
    }
}

回复于 2024-05-03T09:14:22+08:00

如何在Symfony 4中处理资产

2 回答

在Webpack Encore中使用copyFiles（）

错误：Encore.copyFiles不是公认的属性或方法 .

相关问题