如何寫圖片的正確路徑？

-4

我在app/assets/javascripts中有一個文件（jquerymenucss.js）。我在app/assets/images中有一張圖片（arrow-down.gif）。但這張圖片在頁面上看不到！（查看空白圖片）。如何寫圖片的正確路徑？

如何更正寫入路徑？

我的js文件：

var arrowimages={down:['downarrowclass', 'arrow-down.gif', 25], right:['rightarrowclass', 'arrow-right.gif']} 

var jquerycssmenu={ 

fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds 

buildmenu:function(menuid, arrowsvar){ 
    jQuery(document).ready(function($){ 
     var $mainmenu=$("#"+menuid+">ul") 
     var $headers=$mainmenu.find("ul").parent() 
     $headers.each(function(i){ 
      var $curobj=$(this) 
      var $subul=$(this).find('ul:eq(0)') 
      this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()} 
      this.istopheader=$curobj.parents("ul").length==1? true : false 
      $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0}) 
      $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
       '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1]) 
       +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0]) 
       + '" style="border:0;" />' 
      ) 
      $curobj.hover(
       function(e){ 
        var $targetul=$(this).children("ul:eq(0)") 
        this._offsets={left:$(this).offset().left, top:$(this).offset().top} 
        var menuleft=this.istopheader? 0 : this._dimensions.w 
        menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft 
        $targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration) 
       }, 
       function(e){ 
        $(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration) 
       } 
      ) //end hover 
     }) //end $headers.each() 
     $mainmenu.find("ul").css({display:'none', visibility:'visible'}) 
    }) //end document.ready 
} 
} 

//build menu with ID="myjquerymenu" on page: 
jquerycssmenu.buildmenu("myjquerymenu", arrowimages)

css文件

.jquerycssmenu { 
    font: bold 12px Verdana; 
    padding-left: 30px; /*offset of tabs relative to browser left edge*/ 
} 

.jquerycssmenu ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

    /*Top level list items*/ 
.jquerycssmenu ul li { 
    position: relative; 
    display: inline; 
    float: left; 
} 

    /*Top level menu link items style*/ 
.jquerycssmenu ul li a { 
    display: block; 
    padding: 5px 20px 10px 0; 
    margin-right: 3px; /*spacing between tabs*/ 
    color: #aa9685; 
    font-size: 12px; 
    font-weight: bold; 
    text-decoration: none; 
} 

.jquerycssmenu ul li a:hover { 
    color: #f00; 
} 

    /*1st sub level menu*/ 
.jquerycssmenu ul li ul { 
    position: absolute; 
    left: 0; 
    display: block; 
    visibility: hidden; 
    border-top: 1px solid #973133; 
} 

    /*Sub level menu list items (undo style from Top level List Items)*/ 
.jquerycssmenu ul li ul li { 
    display: list-item; 
    float: none; 
} 

    /*All subsequent sub menu levels vertical offset after 1st level sub menu */ 
.jquerycssmenu ul li ul li ul { 
    top: 0; 
} 

    /* Sub level menu links style */ 
.jquerycssmenu ul li ul li a { 
    font: normal 13px Verdana; 
    width: 160px; /*width of sub menus*/ 
    background: #761f20; 
    color: #ffffff; 
    padding: 8px 5px; 
    border-top-width: 0; 
    font-size: 11px; 
} 

.jquerycssmenu ul li ul li a:hover { /*sub menus hover style*/ 
    background: #b14546; 
    color: black; 
} 

    /* ######### CSS classes applied to down and right arrow images ######### */ 

.downarrowclass { 
    position: absolute; 
    top: 7px; 
    right: 5px; 

} 

.rightarrowclass { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
}

來源

2014-07-07 Cat

編寫相對於圖像顯示在頁面上的路徑 –

您應該提供更多信息（例如，各資產的位置以及它們如何相互引用）。 – Brendan

如果你在JavaScript分配圖像路徑，例如一個img元素的src屬性，那麼該路徑將相對於文檔（而不是您正在運行它的腳本）。該路徑是相對於文檔的URL ，因爲客戶端看到它。

（這是CSS，這裏的路徑是相對於客戶端看到的CSS文件的URL不同，而不是文檔的CSS文件中使用。）

因此，例如：

如果客戶端（瀏覽器）在http://www.example.com/foo/document.html處看到文檔，並且您的代碼包含在該文檔中（來自任何地方），並且圖像的實際URL爲（guessing）http://www.example.com/assets/images/down-arrow.gif，則您需要../assets/images/down-arrow.gif或/assets/images/down-arrow.gif。

如果客戶看到該文檔在http://example.com/doc.html且圖像上http://example.com/app/assets/images/down-arrow.gif，則相對路徑是app/assets/images/down-arrow.gif（或/app/assets/images/down-arrow.gif）。

來源

2014-07-07 20:57:39

以及如何在js中編寫此字符串：var arrowimages = {down：['downarrowclass'，'app/assets/images/arrow-down.gif'，25]？ – Cat

@Cat：這是一個字符串。你可以像任何其他字符串一樣書寫。由於您從未說過文檔的外部URL與圖像的外部URL之間的關係，因此無法準確告訴您需要什麼。但是，上面告訴你**如何弄清楚。這是一個相對URL，相對於圖像所在的文檔。 –

如果你在只是有一個（JS）文件中的所有插件，而不是使用一個額外的CSS文件，你應該使用絕對路徑死心塌地。因爲你可能會將你的插件包含在所有形式的頁面中（foo /，bar/this，there/is/only/zuul）。比較T.J. Crowder's answer。在CSS文件中，您可以使用相對URL，相對於CSS文件。

來源

2014-07-07 21:08:12 flowtron

如何寫圖片的正確路徑？

回答

相關問題