CSS中的图像路径以支持CD​​N [英] Image paths in CSS to support CDN

问题描述

我试图将我们的图像部署到cdn。目前css有我们网站上的图像的相对路径。这些路径将需要支持CDN映像位置。有没有人如何做到这一点？

或者如果任何人有一个很好的教程部署到CDN。

$ b $

1. 我使用SASS - http://sass-lang.com/


2. 我有一个名为cdn.scss的mixin内容为$ image_path：/ images /;


3. 在sass样式中导入mixin @importcdn.scss


4. 路径如下：background：url（$ image_path +image.png）;


5. 在部署我更改mixin.scss中的$ image_path变量，然后重新运行sass

UPDATE

我们使用bash更新档案

  cat> preprocess / sass / _cdn.scss<<< EOT 
 \ $ image_path：// CDN_URL /; 
  

示例代码在_cdn.scss

  $ image_path：/ public / images /; 
  

然后它在本地默认工作，但在生产推送，我们运行bash脚本更新使用cdn location

解决方案

最简单的办法是在CDN上托管你的图片和CSS文件。 CSS文件中的图像路径是相对于CSS文件本身的，所以你不必改变你的CSS。

如果这不是一个选项，重新插入将完全限定的URL放在样式表中。现在，如果你真的想要，你可以动态生成你的CSS文件动态，并执行一些替换，所以你实际上不必硬编码CDN在你的工作表。

I am trying to deploy our images to a cdn. Currently the css has relative paths to images on our site. These paths will need to support the CDN image location. Does anyone have advice on how I can do this?

Or if anyone has a good tutorial on deploying to a CDN.

---

This is how I ended up accomplishing this.

1. I used SASS - http://sass-lang.com/
2. I have a mixin called cdn.scss with content like $image_path: "/images/";
3. Import that mixin in the sass style @import "cdn.scss"
4. Update image paths as such: background: url($image_path + "image.png");
5. On deployment I change the $image_path variable in the mixin.scss and then rerun sass

UPDATE

We use bash to update the file

cat > preprocess/sass/_cdn.scss <<EOT
\$image_path: "//CDN_URL/";

Example code in the _cdn.scss

$image_path: "/public/images/";

Then it works by default locally, but on production push, we run the bash script to update using the cdn location

解决方案

Probably the easiest thing would be to host both your images and CSS file on the CDN. Image paths in your CSS file are relative to the CSS file itself, so you won't have to change your CSS at all.

If that's not an option, you're stuck putting the fully qualified URLs in your stylesheet. Now, if you really wanted to, you could generate your CSS file dynamically on the fly, and perform some replacement so you don't actually have to hard code the CDN in your sheet.

这篇关于CSS中的图像路径以支持CD​​N的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！