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

我正在写一个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（我不知道如果我被允许这样做），我没有错误anymorre，但按钮仍然是空的

ps：在我的代码中，我追加myButton以另一种方式，因为，我正在写的文件，不是我的索引文件，但问题不在这里（我已经尝试了不同的src http://static.jsbin.com/images/favicon.png），它的工作。你能帮我吗？

感谢

来源

2013-07-24 user1499220

使用'src'：'myButton.attr（“src”，“path/to/icon”）;' – Cherniv

为什么你使用JavaScript来应用你的CSS？ – quoo

你可以发布你现在拥有的完整流程（创建，添加按钮，添加课程）吗？我们错过了一些可能导致问题的步骤。 – quoo

你可以尝试这样的：

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 Demo

来源

2013-07-24 15:36:26 DarkAjax

谢谢你的回答，其实它适用于“外部图像”，但在我的情况下，图标是本地文件，下面是我得到的错误：不允许加载本地资源，我应该怎么做？ – user1499220

@ user1499220所以，你面临的问题（不是如何把图像放在你的按钮上）是如何在外部工作时将本地图像加载到按钮上？[这有帮助吗？]（https： //www.google.com/search?q=Not+allowed+to+load+local+resource） – DACrosby

我会用一个伪元素，这里记载：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/

来源

2013-07-24 15:31:18 quoo

我将jss文件与css分开。然后，var myButton = $（'

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

回答

相关问题