时间戳

首页 > 解决方案 > Encore webpack 或资产在 symfony 4 中生成错误的图像路径

url - Encore webpack 或资产在 symfony 4 中生成错误的图像路径

问题描述

我正在尝试学习使用 encore webpack。好吧，按照本指南Encore + webpack + bootstrap sass和本指南Symfony 4+ enconre + Bootstrap 4我让 symfony 使用我使用的 scss 和 js 资产。但问题是当我在我的 scss 代码（对于 bg）中插入图像时，我在浏览器中看到的相对 url 生成错误。

Webpack 在这里生成图像：

public\build\images\2.f26e9a05.jpg

但是浏览器中的 url 最终是这样的：

/public/build/build/images/2.f26e9a05.jpg

（如果我删除了第二个“build/”，图像会按原样加载）这是我的文件夹结构：

assets:
   css:
     app.scss
   js:
     app.js
public:
   images:
     2.jpg

应用程序.scss：

@import '~bootstrap/scss/bootstrap';
...
.parallax {
background-image: url("images/2.jpg");
}

Webpack.config.js：

var Encore = require('@symfony/webpack-encore');

Encore
// the project directory where compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('build')
// the public path you will use in Symfony's asset() function - e.g. asset('build/some_file.js')
.setManifestKeyPrefix('build/')

.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())

// the following line enables hashed filenames (e.g. app.abc123.css)
//.enableVersioning(Encore.isProduction())

// uncomment to define the assets of the project
.addEntry('app', './assets/js/app.js')
//.addStyleEntry('css/app', './assets/css/app.scss')

// uncomment if you use TypeScript
//.enableTypeScriptLoader()

// uncomment if you use Sass/SCSS files
.enableSassLoader()

// uncomment for legacy applications that require $/jQuery as a global variable
.autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

index.html.twig：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}100Monos{% endblock %}</title>
    {% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('build/app.css') }}">
    {% endblock %}
</head>
<body>

    <div class="container">
    {% block body %}
    <div id="Nosotros" class="pantalla d-flex align-items-center parallax">
        <div class="contenido">
            <h1>100Monos</h1>
            <h3>Nuestra Web es mala porque pasamos todo el tiempo haciendo la suya</h3>
            <img src="{{ asset('images/1.jpg') }}">             
        </div>
    </div>

    {% endblock %}
    {% block javascripts %}
      <script src="{{ asset('build/app.js') }}"></script>
    {% endblock %}
    </div>
</body>
</html>

标签： urlwebpacksasssymfony4webpack-encore

解决方案

我正在回答这个相当老的问题，因为我认为在此期间有关 yarn watch 和公共路径设置的一些事情发生了变化：

如果我这样做：

.setPublicPath('./')

yarn watch感到被冒犯，并表现出：

WARNING The value passed to setPublicPath() should *usually* start with "/" or be a full URL (http://...). If you're not sure, then you should probably change your public path and make this message disappear..

所以我认为这应该是这样的：

Encore

    // directory where compiled assets will be stored
    .setOutputPath('public/build/')

    // public path used by the web server to access the output path
    .setPublicPath('/public/build')

    // only needed for CDN's or sub-directory deploy
    .setManifestKeyPrefix('public/build/')

因此，公共路径应该仍然是绝对的，而“清单前缀”将设置作为子目录处理。

可以在这里找到相关信息：

只是为了正确而添加了这个，因为我偶然发现了它，其他人也可能......

推荐阅读