Image paths in CSS to support CDN

送分小仙女□ 提交于 2019-12-20 09:58:03

问题


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


回答1:


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.



来源:https://stackoverflow.com/questions/3848147/image-paths-in-css-to-support-cdn

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!