如何將本地圖像加載到按鈕中

Question

我正在寫一個js文件，這是我的按鈕外觀

var myButton = $('<button type="button" style="display:inline">Translate Right</button>');
    myButton.css({"margin-top":"5px", "float":"left"});

現在，我想用一個圖標替換“向右翻譯”文本。 我試過了 ：

   var myButton = $('<button type="button" style="display:inline">Translate Right</button>');
       myButton.css({"margin-top":"5px", "float":"left"});
       $('body').append(myButton); 
      myButton.html('<img src="path\to\image">'); // backslash because I'm using windows

但這是行不通的。 我有一個空按鈕。 我有這個錯誤：不允許加載本地資源。 我用src更改了網址（我不確定是否可以這樣做），我沒有任何錯誤，但按鈕仍然為空

ps：在我的代碼中，我以另一種方式將myButton附加到主體上，因為我正在寫入的文件不是我的索引文件，但問題不在這里（我已經嘗試過使用其他src http：// static .jsbin.com / images / favicon.png ）並成功。 請問你能幫幫我嗎？

謝謝

Answer 1

我會使用psuedo元素，在此處記錄： http : //css-tricks.com/pseudo-element-roundup/

另外，我建議不要將CSS放入javascript中，而是通過javascript更改類名，如此處所述： http : //smacss.com/book/state

即：

.myButton:after{
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: (myIcon.png);
}

編輯：

我認為您嘗試各種方法之間的代碼出了點問題。 這個JSFiddle為我工作： http : //jsfiddle.net/4C6e3/

Answer 2

您可以嘗試類似：

var myButton = $('<button type="button" style="display:inline">Translate Right</button>');
myButton.css({"margin-top":"5px", "float":"left"});

接着：

myButton.html('<img src="path/to/icon" />');

但是您應該將<button>與這種方法結合使用...

JSBin演示