Я пытаюсь установить 'src', вызвав функцию javascript, которая возвращает путь следующим образом:
<img src="getImagePath()" />
функция:
function getImagePath(){
return "images/image1.png";
}
Но это не работает. Что-нибудь мне не хватает? Спасибо всем, кто указал мне в правильном направлении.
Атрибут src принимает URL, а не JavaScript. Возможно, вы захотите попробовать
<img src="pixel.gif" onload="this.onload=null; this.src=getImagePath();" />
Вы не можете этого сделать. Атрибут src элемента img не может быть интерпретирован как javascript при интерпретации html.
Но вы можете это сделать:
<img id=someImage>
<script>
function getImagePath(){
return "images/image1.png";
}
document.onload = function(){
document.getElementById('someImage').src=getImagePath();
};
</script>
Основываясь на Eugen answer, я хотел, чтобы что-то самодостаточное (без идентификатора, как можно больше в строке), для которого не требуется размещенный образ pixel.gif. Я придумал несколько возможностей:
Один вариант заключается в использовании URL-адреса src с кодировкой base64 (как как можно меньше). Обратите внимание, что данные-uris поддерживаются в IE8 +:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" onload="this.onload=null; this.src=getImagePath();">
Посмотрите на действие jsfiddle.
Второй вариант - использовать document.write для записи тега изображения с помощью встроенного script. Просто поставьте ниже <script> вместо <img>. Обратите внимание, что многие считают document.write плохую практику:
<script>
function getImagePath() {
return "http://i.imgur.com/4ILisqH.jpg";
}
document.write('<img src="'+getImagePath()+'">');
</script>
Посмотрите в действии на codepen.io.
Третий (возможно, еще более хакерский) вариант заключался бы в том, чтобы принудительно разорвать изображение, предоставив null src и (ab) использовать обратный вызов onerror.
Это работает в IE11 и Chrome, но не в Firefox:
<img src onerror="this.onerror=null; this.src=getImagePath();">
Посмотрите на действие jsfiddle.
Этот четвертый параметр опирается на простую функцию, которая устанавливает тег <img>, за которым следует сразу встроенный <script>, который устанавливает изображение src через JavaScript:
<!-- In the <body> -->
<img><script>set_most_recent_img_src(getImagePath())</script>
И в вашем <head>:
<!-- In the <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>
Посмотрите на действие codepen.io.
Резюме: Я просто мысли. Каждый вариант имеет разные последствия и требования - все они обходные пути, и их следует тщательно протестировать для вашего конкретного случая использования. Лично я думаю, что первый вариант (base64 URI) является самым надежным (если вы игнорируете старые браузеры IE, что я с радостью могу).
<script type="text/javascript">
var country = $("#SCountry").val();
document.getElementById("iframeid").setAttribute("src","https://domain.com/country="+country)
</script>