[英]Set (CSS background-image) image assets in Symfony 4
I'm practicing with Symfony 4 and I am trying to show my images through CSS. 我正在使用Symfony 4进行练习,并且试图通过CSS显示图像。 Now when I run
npm run dev
it only compiles the CSS and JS files but not the images. 现在,当我运行
npm run dev
它仅编译CSS和JS文件,而不编译图像。 I moved al the images to the /assets/img/
folder. 我将所有图像移到了
/assets/img/
文件夹。
Now I'm eager to know how I can work with the CSS paths to adapt to the Symfony environment. 现在,我很想知道如何使用CSS路径来适应Symfony环境。 I only found solutions regarding Symfony 2 and 3 which are not working in this version.
我只找到了与Symfony 2和3有关的解决方案,这些解决方案在此版本中不起作用。 My CSS is:
我的CSS是:
.about-solution-about {
background: url(/img/placeholder.jpg) no-repeat center;
background-size: cover;
width: 540px;
height: 330px;
padding-top: 40px;
}
The image is now in this location: project/assets/img/placeholder.jpg
该图像现在位于以下位置:
project/assets/img/placeholder.jpg
Somehow I need to access this image in the public folder through the compiled app.css file. 我需要以某种方式通过编译的app.css文件访问公用文件夹中的该图像。 I know that the
app.css
and the app.js
files are compiled and placed in the /public/build/
folder. 我知道
app.css
和app.js
文件已编译并放置在/public/build/
文件夹中。
Now, how do I compile or build all the image assets to the /public/build/
folder and recall those files in my CSS? 现在,如何将所有图像资产编译或构建到
/public/build/
文件夹中,并在CSS中重新调用这些文件?
The building of the regular CSS and JS assets in the /assets/
folder are handled by the Webpack Encore webpack.config.js
file in your project directory. /assets/
文件夹中常规CSS和JS资产的构建由项目目录中的Webpack Encore webpack.config.js
文件处理。
When you run the npm run dev
command in your terminal the files app.css
and app.js
are compiled and placed in the /public/build/
folder. 在终端中运行
npm run dev
命令时,将编译文件app.css
和app.js
并将其放置在/public/build/
文件夹中。
If you also want images included in the /public/build/
folder you can make use of the Copy Webpack Plugin . 如果您还希望将图像包含在
/public/build/
文件夹中,则可以使用“ 复制Webpack插件” 。
First, install the plugin with the npm i -D copy-webpack-plugin
command in your terminal. 首先,在终端中使用
npm i -D copy-webpack-plugin
命令安装插件。
Then edit the webpack.config.js
file in your home project folder. 然后在您的主项目文件夹中编辑
webpack.config.js
文件。 Under the first line, add: 在第一行下,添加:
var CopyWebpackPlugin = require('copy-webpack-plugin');
And then right before the Encore section ends with a semicolon ;
然后在Encore部分之前以分号结束
;
, add: ,添加:
.addPlugin(new CopyWebpackPlugin([
{ from: './assets/img', to: 'img' }
]))
JSFiddle example of the whole file here . JSFiddle整个文件的示例在这里 。
Now, make sure that you have images in the /assets/img/
folder. 现在,确保
/assets/img/
文件夹中有图像。
Run the npm run dev
command and you 'll see that all your images from the assets folder are now available in the /public/build/img/
folder!! 运行
npm run dev
命令,您将看到资产文件夹中的所有图像现在在/public/build/img/
文件夹中可用!
In your example the correct path in your CSS would now be: 在您的示例中,CSS中的正确路径现在为:
background: url(/build/img/placeholder.jpg) no-repeat center;
You could try to use cssrewrite filter within stylesheets twig tag / base twig /: 您可以尝试在样式表树枝标签/基础树枝/中使用cssrewrite过滤器:
{% stylesheets 'source to css files' filter='cssrewrite' %}
{% endstylesheets %}
I think there's no way to work with Assets in pure CSS code. 我认为无法在纯CSS代码中使用Assets。 I recommend you to set the background parameter in your HTML, where you actually can.
我建议您在实际可以的地方在HTML中设置background参数。 Hope you figure it out!
希望你能弄清楚!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.