Javascript function return src path

前端未结

关注

 4  1091

小鲜肉

I\'m trying to set an \'src\' by calling a javascript function that returns the path like so:

the fun

相关标签:

4条回答

梦谈多话

2020-12-05 19:28
You can't do this. The src attribute of an img element can't be interpreted as javascript when the html is interpreted.

But you may do this :
```
<img id=someImage>

<script>
    function getImagePath(){
     return "images/image1.png";
   }
   document.onload = function(){
       document.getElementById('someImage').src=getImagePath();
   };
</script>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

悲哀的现实

2020-12-05 19:40

https://stackoverflow.com/a/17229404/487771

<script type="text/javascript">
 var country = $("#SCountry").val();
 document.getElementById("iframeid").setAttribute("src","https://domain.com/country="+country)
 </script>

0 讨论(0)

南旧

2020-12-05 19:43
The src attribute takes an URL, not JavaScript. You might want to try
```
<img src="pixel.gif" onload="this.onload=null; this.src=getImagePath();" />
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
轻奢々

2020-12-05 19:45
Building on Eugen's answer, I wanted something self-contained (no id's, as inline as possible) that would not require a hosted pixel.gif image. I came up with a few possibilities:

One option would be to use a base64 encoded src URL instead (as small as possible). Note that data-uris are supported in IE8+:
```
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" onload="this.onload=null; this.src=getImagePath();">
```
See it in action on jsfiddle.

A second option would be to use document.write to write the image tag directly with an inline script. Just put the below <script> instead of the <img>. Note that many consider document.write to be bad practice:
```
<script>
  function getImagePath() {
    return "http://i.imgur.com/4ILisqH.jpg";
  }
  document.write('<img src="'+getImagePath()+'">');
</script>
```
See it in action on codepen.io.

A third (perhaps even more hackish) option would be to forcibly break the image by supplying a null src, and (ab)use the onerror callback.

This works in IE11 and Chrome, but not Firefox:
```
<img src onerror="this.onerror=null; this.src=getImagePath();">
```
See it in action on jsfiddle.

This fourth option relies on a simple function that sets an <img> tag followed immediately by an inline <script> that sets the image's src via JavaScript:
```

<img><script>set_most_recent_img_src(getImagePath())</script>
```
And in your <head>:
```

<script>
  function getImagePath() { return "https://www.gravatar.com/avatar/71ec7895cada78741057c644d858b0e3"; }

  function set_most_recent_img_src(val) {
    var a = document.body.getElementsByTagName('IMG');
    var img = a?a[a.length-1]:0;
    if (img) img.src = val;
  }
</script>
```
See it in action on codepen.io.

Summary: I'm just ideating. Each option has different implications and requirements -- they're all workarounds, and should be tested thoroughly for your specific use case. Personally I think the first option (base64 URI) is the most solid (if you ignore old IE browsers, which I happily can).
0 讨论(0)
发布评论:

提交评论
- 加载中...