刘华佼的全栈学习记录

引用图片方法的作品实例集

| Comments

1、在app/views/.../xxx.html.erb里引用

1.1通过链接引用:

<a href="jobs/1"><img class="img-responsive frontpage-img" src="http://ww4.sinaimg.cn/large/006tNc79ly1feu9gqsep9j30mw14mwfr.jpg" alt="设计师" height="500" width="300"> </a>

例:陳同学作品源码

1.2引用本地图片:

1.2.1图片在app/assets/images/里:

以下实例大部分出自app/views/welcome/index.html.erb:

1.2.1.1初级用法:

<%= image_tag("developer.png") %>

例:陈同学作品源码

<img src="<%= image_url 'banner.jpg' %>">

例:我的作品源码

<a class="navbar-brand" href="/"><img src='<%= image_url 'logo.png' %>' >真·24K Offer</a>
例:招聘网站教材

1.2.1.2进阶用法:

<%= image_tag 'pic-2.png', class: 'img-responsive' %>

例:陳同学作品源码

<img class="img-circle" src="<%= image_url 'beijing.jpg' %>" alt="北京">
例:我的作品源码

1.2.1.3高级用法:


<%= link_to image_tag("steel.jpg", class: "img-circle img-responsive img-center frontpage-img"), image_path(steel_jobs_path(:order => "category"))%>

例:韵儿爸爸同学作品源码

1.2.2图片在public/images/里:

<link rel="shortcut icon" href="/images/favicon.ico">
例:招聘网站教材

2、在application.scss中使用图片当背景:

2.1通过链接引用:

.sec-main {
background: url(https://source.unsplash.com/kVf7VRgg4p8/1920x1080) no-repeat center center;
}
忘记出处是哪里了:(

2.2引用本地图片:

图片在app/assets/images/里:

.sec-main {
background: asset-data-url("picture-3.jpg") no-repeat center center;
}
例:陈同学作品源码

.box {
background-image: image_url("header.jpg");
}
例:陳同学作品源码

3、在xxx.css.erb里引用

3.1引用本地图片:

图片在app/assets/images/里:

以app/assets/stylesheets/business-frontpage.css.erb为例:

.business-header {
background: url('<%= asset_path("banner.jpg") %>') center center no-repeat scroll;
}
例:韵儿爸爸同学作品源码

4、总结

收集完各种实例,再对比扩展阅读的文档,我有些晕。还是在需要用的时候,查阅本文,根据具体情况找对应的实例套用吧。

最后步骤:敲黑板!看重点!

如果这篇文章对你有帮助, 请为我的作品投上一票!谢谢啦!

免费用户如果想购买VIP课程,可以使用我的专属推荐码减学费哦:6194-e895-58cb

扩展阅读:

The Asset Pipeline
Ruby on Rails 實戰聖經
陈同学作品
韵儿爸爸同学作品
陳同学作品
我的作品

Comments

comments powered by Disqus