Ruby China

新手问题 关于 HTML 语句如何改写为 ERB 使用 tag helper 取得默认路径图片文件

hxygsh · 2016年01月04日 · 最后由 hxygsh 回复于 2016年01月06日 · 2282 次阅读 
<div class="item active">
       <span data-picture data-alt="OKWU.edu Homepage">
           <span data-src="okwu-sm.jpg"></span>
           <span data-src="okwu.jpg" data-media="(min-width: 640px)"></span>
            <!--[if (lt IE 9) & (!IEMobile)]>
                <span data-src="okwu.jpg"></span>
           <![endif]-->
           <noscript>
               <img src="okwu-sm.jpg" alt="OKWU.edu Homepage">
           </noscript>
       </span>
   </div>

rails 中 view 页面想引用这个 html 文档，图片文件okwu-sm.jpg和okwu-sm.jpg 放在app/assets/images目录下，对于<img></img>内容可以改为<%= img_tag "okwu-sm.jpg", alt="OKWU.edu Homepage" %> 没有问题； 可是对于<span data-src="okwu.jpg" data-media="(min-width: 640px)"></span> 也想转为 tag helper 方法，转的原因是 assets pipeline 默认的图片路径是 assets/images；而 src="okwu-sm.jpg" 无法取得 assets/images 路径下的okwu-sm.jpg图片文件。试了很多种方法都不行（比如路径前加/ /okwu.jpg; 路径加../;路径前加./;图片文件夹放 public 下，运行rake assets:precompile;都没有解决！）

不知语法该怎么写，或者怎样让src=“ ”取得图片文件？ 不知这样写是否可以？胡乱猜的，还没来得及试！ <span data-src=url('<%= asset_path("okwu-sm.jpg")%>') data-media="(min-width: 640px)"></span>

qinfanpeng #1 2016年01月05日

试试 image_path

1 个赞
hxygsh #2 2016年01月05日

没有报错，但还是无法取出图片，是了 asset_path 也不行，到底怎么能行呢？

<div class="carousel-inner">
                    <div class="item active">
                        <span data-picture data-alt="OKWU.edu Homepage">
                            <span data-src=url('<%= image_path("okwu-sm.jpg") %>')></span>
                            <span data-src=url('<%= image_path("okwu.jpg") %>') data-media="(min-width: 640px)"></span>
                             <!--[if (lt IE 9) & (!IEMobile)]>
                                 <span data-src=url('<%= image_path("okwu-sm.jpg") %>')></span>
                            <![endif]-->
                            <noscript>
                                <img src=url('<%= image_path("okwu-sm.jpg") %>') alt="OKWU.edu Homepage">
                            </noscript>
                        </span>
                    </div>
</div>

网页代码是这样的：

<div class="item active">
                       <span data-picture data-alt="OKWU.edu Homepage">
                           <span data-src=url('/assets/okwu-sm-bcbb55d855353dbe6f907fe86341e56b.jpg')></span>
                           <span data-src=url('/assets/okwu-f1cdacd200a678ea4cc513bd75a81bf5.jpg') data-media="(min-width: 640px)"></span>
                            <!--[if (lt IE 9) & (!IEMobile)]>
                                <span data-src=url('/assets/okwu-sm-bcbb55d855353dbe6f907fe86341e56b.jpg')></span>
                           <![endif]-->
                           <noscript>
                               <img src=url('/assets/okwu-sm-bcbb55d855353dbe6f907fe86341e56b.jpg') alt="OKWU.edu Homepage">
                           </noscript>
                       </span>
                   </div>
adamshen #3 2016年01月05日

#2 楼 @hxygsh 这个 url 没有包含在 erb 里，是当 html 用吗？

hxygsh #4 2016年01月05日 
<span data-src="<%= asset_path("okwu-sm.jpg") %>"></span>
 <span data-src="<%= asset_path("okwu.jpg") %>" data-media="(min-width: 640px)"></span>

或

<span data-src="<%= image_path("okwu-sm.jpg") %>"></span>
<span data-src="<%= image_path("okwu.jpg") %>" data-media="(min-width: 640px)"></span>

网页源代码显示正确了 还是不能取出图片，奇了怪了就！

<span data-src="/assets/okwu-sm.jpg"></span>
<span data-src="/assets/okwu.jpg" data-media="(min-width: 640px)"></span>
hxygsh #5 2016年01月05日

#3 楼 @adamshen 是 其实就是 src=“ ”放个图片路径在里面 可就是死活取不出图片 用 img_tag 没问题，可以取出 可是 data-src 的标识无法放进去 img_tag 标签里面！

hxygsh #6 2016年01月05日

这 pipeline 忒坑人了！

adamshen #7 2016年01月05日

#5 楼 @hxygsh 一般来说是这种形式的

<%= tag :span, "data-src" => image_path("okwu-sm.jpg") %>
<%= tag :span, "data-src" => image_path("okwu.jpg"), "data-media" => "min-width: 640px" %>
hxygsh #8 2016年01月05日

#7 楼 @adamshen 按您的指导改写成：

<div class="item active">
     <span data-picture data-alt="OKWU.edu Homepage">
        <%= tag :span, "data-src" => image_path("okwu-sm.jpg") %>
        <%= tag :span, "data-src" => image_path("okwu.jpg"), "data-media" => "min-width: 640px" %>
          <!--[if (lt IE 9) & (!IEMobile)]>
            <%= tag :span, "data-src" => image_path("okwu.jpg") %>
         <![endif]-->
         <noscript>
             <%= image_tag "okwu-sm.jpg", alt:"OKWU.edu Homepage" %>
         </noscript>
     </span>
 </div>

html 源码显示：

<span data-picture data-alt="OKWU.edu Homepage">
           <span data-src="/assets/okwu-sm.jpg" />
           <span data-media="min-width: 640px" data-src="/assets/okwu.jpg" />
             <!--[if (lt IE 9) & (!IEMobile)]>
               <span data-src="/assets/okwu.jpg" />
            <![endif]-->
            <noscript>
                <img alt="OKWU.edu Homepage" src="/assets/okwu-sm.jpg" />
            </noscript>
        </span>
    </div>

提示说 span 结束标签除了问题，看着接近曙光了倒是！ 正常是<span>...</span>; 这里是：<span .... /> 换成 content_tag 倒是<span>...</span> 行了，但 中间语法错误一堆，=> 符号识别不了，唉！！！

hxygsh #9 2016年01月05日

语法错误，不知道怎么改了。

<div class="carousel-inner">
                     <div class="item active">
                        <span data-picture data-alt="OKWU.edu Homepage">
                           <%= content_tag :span, data-src:  :image_path("okwu-sm.jpg") %>
                           <%= tag :span, data-src:  :image_path("okwu.jpg"), data-media:  "min-width: 640px" %>
                             <!--[if (lt IE 9) & (!IEMobile)]>
                               <%= content_tag :span, data-src:  :image_path("okwu.jpg") %>
                            <![endif]-->
                            <noscript>
                                <%= image_tag "okwu-sm.jpg", alt:"OKWU.edu Homepage" %>
                            </noscript>
                        </span>
                    </div>
1 个赞
adamshen #10 2016年01月05日

#9 楼 @hxygsh 用双引号做 key，别用 symbol。因为中间有减号，词法分析时会认为 data-src 是好几个对象。

hxygsh #11 2016年01月06日

词法分析不认“ ”和=>, 看来得换个思路解决这个问题了，这样走不通。把图片已经由原来 200-300K 一张压缩到 100K 多一点，即使没有小图片 手机读取速度也说的过去了，暂时先不弄这个图片了，慢慢想想其他思路，特别感谢几位得耐心指点！

需要 登录 后方可回复, 如果你还没有账号请 注册新账号