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

hxygsh · 2016年01月04日 · 最后由 hxygsh 回复于 2016年01月06日 · 2234 次阅读
<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.jpgokwu-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>

试试 image_path

没有报错,但还是无法取出图片,是了 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>

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

<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>

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

这 pipeline 忒坑人了!

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

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

#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> 行了,但 中间语法错误一堆,=> 符号识别不了,唉!!!

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

<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>

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

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

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