Question

所以我有以下JavaScript函数。

var LogoUrl = function() {
    document.write('views/img/common/site-logo.svg');
}

我希望在html img src属性中使用此函数。

这是一个例子，虽然这种语法不起作用，它应该让你知道我在寻找什么。

<img class="site-logo" src="<script> LogoUrl() </script>" alt="Site Logo">

希望这会在浏览器中导出以下内容

<img class="site-logo" src="views/img/common/site-logo.svg" alt="Site Logo">

这样做的最佳方法是什么？

Answer 1

您可以使用以下内容执行此操作：

<script>
    document.write('<img class="site-logo" src="' + 'views/img/common/site-logo.svg' + '" alt="Site Logo">');
</script>

由于脚本标记确实是一个标记，因此不能将其放在另一个标记的属性中。

然而，更好的方法如下：

为要显示的元素准备span元素，并为其指定特定的id。这将是你的HTML：

This is my image: <span id="myImg"></span>.

这将是你的jQuery代码：

$(function() {
    $('<img>').class('site-logo')
        .attr('src', 'views/img/common/site-logo.svg')
        .attr('alt', 'Site Logo')
        .appendTo('#myImg');
});

或者，您可以在不定义src属性的情况下准备图片，而不是准备跨度，并使用以下HTML：

This is my image: <img id="myImg" class="site-logo" alt="Site Logo">.

以及以下jQuery代码：

$(function() {
    $('#myImg').attr('src', 'views/img/common/site-logo.svg');
});

Answer 2

您可以使用jquery $(document).ready()来设置图像src。

$(document).ready(function (){
        $('img.site-logo').attr('src', 'views/img/common/site-logo.svg');
      });

Answer 3

你可以这样做 - 但这会让它变得阻碍。

<script>document.write("<img class=\"site-logo\" src=\"views/img/common/site-logo.svg\" alt=\"Site Logo\">")</script>

它也不是很有条理，因为它将所有内容与标记联系在一起，你可能只是把它作为标记。

通过更改src属性

，最好不要这样做

var logo = document.getElementsByClassName('site-logo')[0];
logo.src = 'http://www.develop.com/Images/v3/tech-symbols/angularjs_logo.png';

演示http://jsfiddle.net/andyw_/XxTuA/268/

如果这就是你需要做的全部 - 我认为使用选择器库或前端框架是不合理的。

Image src属性中的JavaScript“<script>”</script>

3 个答案: