精华内容
下载资源
问答
  • ![图片说明](https://img-ask.csdn.net/upload/201709/20/1505889112_957625.png) ![图片说明](https://img-ask.csdn.net/upload/201709/20/1505891333_601498.png)
  • 前天分享了《通过七牛云存储 缓存加速Gravatar头像,解决被墙问题》,不过这昨天发现通过七牛云存储缓存加速Gravatar 头像,会导致头像图片所在的路径 url 参数失效,通过参数来定义图片宽高大小没戏了。这样七牛...

    前天分享了《通过七牛云存储 缓存加速Gravatar头像,解决被墙问题》,不过这昨天发现通过七牛云存储缓存加速Gravatar 头像,会导致头像图片所在的路径 url 参数失效,通过参数来定义图片宽高大小没戏了。这样七牛加载的头像图片一律是默认的80x80大小,虽然在CSS 定义下看起来没有区别,但无缘无故加载多了1kb 左右的体积实在不爽。苛刻的Jeff 决定解决这个问题。

    问题呈现

    如果你熟悉get_avatar函数的使用,你可能明白下面我所说的内容。不熟悉的也没关系,可以先阅读一下WordPress 官方文档,Jeff 尽量用简单的文字说明:

    在WordPress 中,调用Gravatar 头像后的图片路径及显示效果如下:

    注意到上面的路径的一些参数,如 s= 、d=、r=G。这些参数的作用分别是:

    ?s=(或?size=)表示为图像指定一个 长宽大小,值为整数,设定后便会返回一个指定大小(长宽一样)的图像。

    ?d= 表示缺省头像——当由于头像分级或未设置头像而无法显示时,可以设置一个缺省头像。

    ?r= 表示头像分级。注册Gravatar 头像还记得有个分级的选项吧?对于国内来几乎没用,r=G 对应是“ 头像适合在所有网站的所有受众类型”。

    对于绝大多数WordPress 站点来说,只有?s=参数有用,其余的都没什么用处。下面是官方路径的Gravatar 头像不同size 的图片,依次是?s=40、60、80、100(你可以审查元素看看):

        

        

        

       

    如下面的来自七牛地址:

    但其实际大小是80x80:

       ,无论你如何修改?s 的参数。

    七牛缓存了Gravatar 服务器的图片,却复制不了他们的参数调用设置。80x80的大小在实际运用中虽然可以通过CSS 控制宽高,但不免多加载了1~2KB 的体积。作为追求完美的 Jeff ,实在不能忍受。

    解决方法:

    在Jeff 发现这个问题时候,想到了两个解决思路(以下以调用40x40大小为例子):

    一、利用七牛云存储本身带有的图片处理的参数,迎合WordPress 的这个 ?s 参数。但悲催的是,七牛不支持 ?s 参数(如果我要设置,必须分隔符为?,样式名称为 s=40,七牛两个都不支持)。叉掉。

    二、通过修改修改get_avatar函数,将参数样式由 ?s 改为七牛支持的分隔符样式(如英文中划线 - )。

    查阅WordPress 官方文档,得知get_avatar 函数在wp-includes/pluggable.php下,打开该文件,从1653 行开始是这么一段代码(Jeff加上了注释):

    if ( !empty($email) ) {

    $out = "$host/avatar/";

    $out .= $email_hash;

    $out .= '?s='.$size;// s= 大小

    $out .= '&d=' . urlencode( $default );//d= 缺省头像

    $rating = get_option('avatar_rating');

    if ( !empty( $rating ) )

    $out .= "&r={$rating}";// r=分级

    if ( !empty($email) ) {

    $out = "$host/avatar/";

    $out .= $email_hash;

    $out .= '?s='.$size;// s= 大小

    $out .= '&d=' . urlencode( $default );//d= 缺省头像

    $rating = get_option('avatar_rating');

    if ( !empty( $rating ) )

    $out .= "&r={$rating}";// r=分级

    注意到 第1656、1657、1661 行(上诉代码则对应第4、5、9行),分别对应 s= 、d=、r=G 参数。

    那么,我们只需要注释掉第1657、1661 行(对应上诉代码则对应第5、9行),将第1656(对应上面第4)行修改为

    $out .= '-'.$size;

    $out .= '-'.$size;

    注意是英文中划线 -,你可以使用七牛支持的其他分隔符_(下划线)或者/(斜杠)或者!(感叹号)。

    完整修改后的代码如下:

    if ( !empty($email) ) {

    $out = "$host/avatar/";

    $out .= $email_hash;

    $out .= '-'.$size;// 有修改

    //$out .= '&d=' . urlencode( $default );//d= 缺省头像

    $rating = get_option('avatar_rating');

    if ( !empty( $rating ) )

    //$out .= "&r={$rating}";// r=分级

    if ( !empty($email) ) {

    $out = "$host/avatar/";

    $out .= $email_hash;

    $out .= '-'.$size;// 有修改

    //$out .= '&d=' . urlencode( $default );//d= 缺省头像

    $rating = get_option('avatar_rating');

    if ( !empty( $rating ) )

    //$out .= "&r={$rating}";// r=分级

    接下来还需要在七牛云存储后台新建图片样式,如Jeff 的设置如下:

    然后就解决了!

    因为技术有限,只想到修改WordPress 源代码的方法。如果你有通过添加过滤器(filter)的方法,还望不吝赐教!

    后记

    就为了这1~2KB 的多余体积,Jeff 就去折腾那么久,真是作孽啊~~~谁叫我那么较真呢?

    通过这个,进一步认识了Gravatar的运用,也不错!

    话说,《通过七牛云存储 缓存加速Gravatar头像,解决被墙问题》该文当时发表在微博时候 @七牛云存储 了一下 ,后来居然被七牛的CEO @许世伟 转发并带来不少流量,Jeff 那个激动啊!咱这破技术也能被大神小小赏识,也不枉这般折腾了!

    展开全文
  • 把数据库里img这个里面存的图片路径运用到JSP的标签上, 目前img里存的是image/malatang.jpg , image是当前项目的图片夹, 完全小白自学中,希望大家能给出详细的修改的代码,谢谢大家! ``` ; charset=UTF-...
  • 我想做一个分享信息到qq空间的功能,分享的内容中有一项是本地图片,文档中的是: params....其中图片链接应该是:需要分享的本地图片路径吧?我的图片在drawable里,请问怎么能获取到图片的路径? 谢谢各位大神~
  • springMVC中,在web.xml中/*来过滤url,怎么区分普通的图片或html的路径
  • background-image:url();url怎么写

    千次阅读 2019-04-30 17:47:36
    大家知道ulr()中是填写路径:(现在假设背景图片名字叫做demo.jpg) 如果该css文件和背景图片在同一文件夹存在且并不包含于其他文件夹 那么直接填写demo.jpg; 如果该css文件和背景图片在同一文件夹存在且图片...

    background-image:用于设置需要显示背景图片;

    大家知道ulr()中是填写路径:(现在假设背景图片名字叫做demo.jpg)

    如果该css文件和背景图片在同一文件夹存在且并不包含于其他文件夹

    那么直接填写demo.jpg;

    如果该css文件和背景图片在同一文件夹存在且图片包含于其他文件夹(abc)

    那么填写//abc/demo.jpg;

    如果该css文件和背景图片不在同一文件夹下,(背景图片在abc文件下,而abc文件夹和css文件所在文件夹并列)

    那么填写../abc/demo.jpg

    相对.css所在的目录而言:
    “…/”表示上一级目录开始
    “./”表示当前同级目录开始
    “/”表示根目录开始。
    …/…/ 表示源文件所在目录的上上级目录

    展开全文
  • <h2>java web 上传图片到项目目录并将文件路径放到Oracle数据库 ()%>/InsertServlet" enctype="multipart/form-data" onsubmit="return checksubmit()" > (0);"> (jpg|jpeg|png|gif)$:只能上传jpg|gif|...
  • background-image:用于...大家知道ulr()中是填写路径:(现在假设背景图片名字叫做demo.jpg) 1、如果该css文件和背景图片在同一文件夹存在且并不包含于其他文件夹 那么直接填写demo.jpg; -->background-image:ur

    background-image:用于设置需要显示背景图片; 

    例如-->background-image:url(demo.jpg);


    大家知道ulr()中是填写路径:(现在假设背景图片名字叫做demo.jpg)

    1、如果该css文件和背景图片在同一文件夹存在且并不包含于其他文件夹

    那么直接填写demo.jpg;-->background-image:url(demo.jpg);

    2、如果该css文件和背景图片在同一文件夹存在且图片包含于其他文件夹(abc)

    那么填写//abc/demo.jpg;-->background-image:url(abc/demo.jpg);

    3、如果该css文件和背景图片不在同一文件夹下,(背景图片在abc文件下,而abc文件夹和css文件所在文件夹并列)

    那么填写../abc/demo.jpg;-->background-image:url(../abc/demo.jpg);

    相对.css所在的目录而言:
    “../”表示上一级目录开始 
    “./”表示当前同级目录开始 
    “/”表示根目录开始。
    ../../  表示源文件所在目录的上上级目录
    


    区分background属性

    background属性也可以设置背景图片,如下所示:

    body
    { 
        background: #00FF00 url(bgimage.gif) no-repeat fixed top;
    }



    一般开发过程中用到的这样的样式比较多,如下所示:     background:#fff url(图片地址) repeat-x left top;

    body
    {
         background: url(../../../assets/login/login-background.jpg) no-repeat 0px 0px;
    }

    此效果是背景图片login-background.jpg平铺为全部背景,没有重叠,占据整个背景页面;



    图片路径上面已经解释过了,就不在说了,大概就是这样。


    这是我的第一篇博客,问题比较简单,嘿嘿,就这样了。

    展开全文
  • 这个div里面是iframe,我在iframe里面有 _ ``` data-options="valueField:'id',textField:'name',url:'GetBidServlet'">_ ``` 就是从servlet获取json数据组成下拉框,这个GetBidServlet我在web...
  • webpack对图片路径的处理

    千次阅读 2019-04-18 15:15:09
    原本我们在网页中的代码,其中对图片资源路径的引入,在打包后文件位置会发生变化,这时图片路径也会发生变化。 这时我们需要解决这个问题:不管位置怎么变,图片路径一定是正确的! 图片大致分为如下几种情况: ...

    前言

    原本我们写在网页中的代码,其中对图片资源路径的引入,在打包后文件位置会发生变化,这时图片路径也会发生变化。
    这时我们需要解决这个问题:不管位置怎么变,图片路径一定是正确的!
    图片大致分为如下几种情况:

    1. css中的图片问题
    2. 网页标签img中的图片(分为静态的和绑定的)

    一、css中的图片问题

    1. 安装相应的图片解析模块【解析与压缩】
    yarn add url-loader file-loader image-webpack-loader -D
    

    2.在webpack.config.js配置文件中配置加载规则

    {
                    test: /\.less$/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
                },
    {
                    test: /\.(png|svg|jpg|gif)$/,
                    // use: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]"
                    use: [
                        {
                            loader: 'url-loader',
                            options:
                            { // 这里的options选项参数可以定义多大的图片转换为base64
                                name: '[name].[ext]',
                                limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                                outputPath: 'images' //定义输出的图片文件夹
                            }
                        },
                        {    //压缩图片要在file-loader之后使用
                            loader: 'image-webpack-loader',
                            options:
                            {
                                bypassOnDebug: true
                            }
                        }
    
                    ]
                }
    

    css代码
    在这里插入图片描述
    用webpack打包后你会发现图片路径不对
    在这里插入图片描述
    原因:
    webpack打包时在css中直接找到了需要的图片文件,比如 1.png
    这时直接就会把这个文件提取出来放入到dist文件夹中中images中(images目录是我们自己设置的),此时图片路径就是images/1.png ,然后他会直接把这个路径作为新生成的css中图片对应的路径。

    此时就需要处理下生成后的图片路径让他保持正确,只需要修改下我们的css的loader解析规则,如下:

    {
                    test: /\.less$/,
                    use: [
                        // MiniCssExtractPlugin.loader, 
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                publicPath: '../' //这个option必须写,否则css中图片路径可能会出错
                            }
                        },
                        'css-loader',
                        'less-loader'
                    ]
                }
    

    图片地址就正常啦
    在这里插入图片描述
    在这里插入图片描述

    二、网页标签img中的图片(静态地址)

    对应这种,基本上什么都不用管,他会自动的调整始终保持正确的。
    在这里插入图片描述

    三、网页标签img中的图片(动态地址)

    如果我们把一个图片的地址作为veu的data中的一个字段,如下:
    在这里插入图片描述
    此时执行后图片是显示不出来的,因为图片根本就没有被打包(对于动态地址而言)

    解决方式一
    我们可以把图片当中一个模块引入到组件中,然后将他赋值为data中字段的值即可。
    如下:需要的所有图片都要这样来引入
    在这里插入图片描述
    解决方式二
    使用require语句导入所需要的模块到组件中进行使用,这样会简洁点。
    在这里插入图片描述

    展开全文
  • css中background-image背景图片路径设置

    千次阅读 2018-04-12 22:37:00
    web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径。 在此之前先要知道几个重要的东东: /项目根目录这个不用多说,就是程序最上层的目录 ./当前目录当前文件所在...
  • 我们可以在网页上点击鼠标右键查看网站源代码,然后找到css里面的背景图这一段代码,查看背景图路径,通过ftp或者服务器进行替换图片即可。html中更换或添加网站背景图片具体代码示例如下:/*控制背景图片是否滚动*/...
  • 从设计不同的角色登录中实现不同的菜单时,将菜单存到数据库,现在实现目录 a便签跳转时,填入href的参数是后台获取的,但python的请求需要用href="{{url_fot()}}",而url_for的动态参数该怎么写 ``` {# menus为...
  • webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片、css...笔者之前也遇到过类似图片路劲的问题,为此还过一篇博文webpack生成的css文件background-image url图片...
  • api写在login.java文件里,文件路径如下: ![图片说明](https://img-ask.csdn.net/upload/201604/15/1460687727_484122.png) 项目名称就是mytest....![图片说明]...请问这个url应该怎么写啊?
  • 但是我用的是maven的tomcat插件,不知道怎么找server.xml配置文件,大神们怎么办,一定要用tomcat部署才行吗,或者图片该存在什么地方好,方便调用,我要传一个json,里面有个url写图片路径给调用,求大神指点
  • Python,可以帮忙抢票...今天教大家一个案例,python爬虫多线程实战:爬取美桌1080p壁纸图片技术点分析· 爬虫requests· 多线程threading· 文件io读写操作· xpath 提取ur· 正则实战· 分析url搞清楚各个url 的关联...
  • jsTree ajax应该怎么写

    2016-06-29 03:54:52
    "url" :${pageContext.request.contextPath }+"/manage/mechanism/selsetMechanismtree", ///${pageContext.request.contextPath }/manage/user/mechanism_manage.jsp "data" : function(n) { //...
  • 图片路径为参数的接口: @GET @Path("/vcardBean/{path}") @Produces({"application/json","application/xml"}) public VCardBean getVCardBean(@PathParam("path") String path) { //path ="D://1.png"; ...
  • 我用ext做上传图片图片要存到数据库中去,我本想的是获取地址,然后将图片对象转为二进制存如数据库,但是路径一直有问题,然后我自己了一个死路径图片就存到数据库了,求java解后台怎么获取对象,网上说的...
  • vue中的style标签中的background background-image 的路径应该怎么写才能正确的打包出来 Vue 的Style中background background-image 的URl地址build 后找不到图片地址: 1、仅需:在build/utils.js文件夹中添加 ...
  • 接收小程序上传的图片,并保存到阿里云服务器中,提供一个URL实现图片的访问 比如,我把图片1.jpg保存到服务器的 /usr/local/apache-tomcat-8.5.39/webapps/ROOT/images/图片1.jpg 然后可以通过以下地址访问 ...
  • 下面是修改微信分享标题、微信分享描述、微信分享图片和不修改的效果对比图:没有修改的微信分享效果图:其中分享内容是分享的页面的url路径。修改过微信分享内容的效果如下图:分享内容为自己定制的内容。1、必要...
  • javaFX 图标image的url

    2020-07-08 16:01:31
    用javafx的一款连接plc桌面软件 在图标 url获取遇到的问题 ...//一般获取图片路径两种的方法 String path=getClass().getClassLoader().getResource("plc.png").getPath(); ///D:/workspace-sts-3.9.2.RELEAS
  • 如图js中datagrid组件中的url路径到底怎么写和Controller中方法名上的标签用哪个?求大神解答! ![![图片说明](https://img-ask.csdn.net/upload/201601/06/1452042505_220354.png)图片说明]...
  • 在form的action的url里这么的: ![图片说明](https://img-ask.csdn.net/upload/201609/25/1474782728_836667.png) 我的本意是想访问action.cs包里的那个action。但实际上,它访问的是action.cs.fox包里的action...
  • 在前面的文章里面有到,...思路很简单,和上面的差不多,前端以post的形式传递二进制图片文件给到后端,后端接收成功之后,同样返回一个字符串类型的url图片路径。 <!DOCTYPE HTML> <html xmlns:th="http:/
  • hexo插入图片

    2018-03-27 09:17:48
    使用markdown写文章,插入图片的格式为,这里要说的是链接地址怎么写。 对于hexo,有两种方式: 使用本地路径:在hexo/source目录下新建一个img文件夹,将图片放入该文件夹下,插入图片时链接即为/img/图片名称。...
  • 小白对GitHub了解不深,也不会大神们的那些配置URL的方法,就钻了个小空子,但如此方式大佬们肯定早就知道,这里只是下来备忘而已。 不是要图片URL吗?不是本地路径访问不了吗?我把图片传到项目里,总不会连...
  • hexo文章中插入图片

    万次阅读 2016-05-02 22:14:53
    使用markdown写文章,插入图片的格式为,这里要说的是链接地址怎么写。 对于hexo,有两种方式: 使用本地路径:在hexo/source目录下新建一个img文件夹,将图片放入该文件夹下,插入图片时链接即为/img/图片名称。 ...

空空如也

空空如也

1 2 3 4 5
收藏数 92
精华内容 36
关键字:

url图片路径怎么写