如何将本地图像加载到按钮中

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