Javascript: загрузка изображения из url и отображение

Я хочу предварить это тем, что я очень новичок в JavaScript. Я ценю твое терпение.

Я пытаюсь создать скрипт, который позволяет пользователю вводить имя в текстовую область, нажимать submit, и изображение отображается на основе этого имени.

мне удалось придумать это:

<html>
<body>
<form>
<input type="text" value="" id="imagename">
<input type="button" onclick="window.location.href='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO">
</form>
</body>
</html>

что почти делает именно то, что мне нужно-загружает изображение вокруг того, что вводит пользователь. Но то, что я хочу, не для того, чтобы изображение открылось в новом окно или загрузить на мой компьютер - я хочу, чтобы он отображался на странице при нажатии в виде изображения, например пример здесь.

Я уверен, что моя неопытность в Javascript является основной причиной того, что я не могу понять это. Сценарий выше, насколько я могу получить, не испортив все. Любая помощь приветствуется.

10
image javascript load

6 ответов

когда кнопка нажата, получите значение ввода и используйте его для создания элемента изображения, который добавляется к телу (или где-либо еще) :

<html>
<body>
<form>
    <input type="text" id="imagename" value="" />
    <input type="button" id="btn" value="GO" />
</form>
    <script type="text/javascript">
        document.getElementById('btn').onclick = function() {
            var val = document.getElementById('imagename').value,
                src = 'http://webpage.com/images/' + val +'.png',
                img = document.createElement('img');

            img.src = src;
            document.body.appendChild(img);
        }
    </script>
</body>
</html>

скрипка

то же самое в jQuery:

$('#btn').on('click', function() {
    var img = $('<img />', {src : 'http://webpage.com/images/' + $('#imagename').val() +'.png'});
    img.appendTo('body');
});
16

вы должны правильно генерировать url-адрес на основе входного значения. Единственная проблема - вы используете window.местоположение.хреф. Окно настроек.местоположение.href изменяет url-адрес текущего окна. Вероятно, вы хотите изменить атрибут src изображения.

<html>
<body>
<form>
  <input type="text" value="" id="imagename">
  <input type="button" onclick="var image = document.getElementById('the-image'); image.src='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO">
</form>
<img id="the-image">
</body>
</html>
1

вам просто не хватало тега изображения, чтобы изменить атрибут "src":

    <html>
<body>
<form>
<input type="text" value="" id="imagename">
<input type="button" onclick="document.getElementById('img1').src =          'http://webpage.com/images/' + document.getElementById('imagename').value +'.png'"     value="GO">
<br/>
<img id="img1" src="defaultimage.png" />
</form>
</body>
</html>
1

вы после чего-то вроде этого:

 <html>
 <head>
    <title>Z Test</title>
 </head>
 <body>

<div id="img_home"></div>

<button onclick="addimage()" type="button">Add an image</button>

<script>
function addimage() {
    var img = new Image();
    img.src = "https://www.google.com/images/srpr/logo4w.png"
    img_home.appendChild(img);
}
</script>
</body>
0

добавьте div с ID imgDiv и сделайте свой скрипт

 document.getElementById('imgDiv').innerHTML='<img src=\'http://webpage.com/images/'+document.getElementById('imagename').value +'.png\'>'

Я пытался оставаться так близко к вашему оригиналу, как tp не перегружать вас jQuery и такими

0

во-первых, я настоятельно рекомендую использовать библиотеку или фреймворк для выполнения Javascript. Но просто для чего-то очень простого или для удовольствия учиться, это нормально. (вы можете использовать jquery, подчеркивание, knockoutjs, angular)

во-вторых, не рекомендуется привязываться непосредственно к onclick, мое первое предложение тоже так.

это сказал Что вам нужно, так это изменить src img на Вашей странице.

в том месте, где вы хотите, чтобы ваши изображения, вы должны вставить тег img, как это:

затем вам нужно изменить onclick, чтобы обновить атрибут src. Самый простой способ, который я могу придумать, - это как его

onclick=""document.getElementById('image-placeholder').src = 'http://webpage.com/images/' + document.getElementById('imagename').value + '.png"

опять же, это не лучший способ сделать это, но это начало. Я рекомендую вам попробовать jQuery и посмотреть, как вы можете выполнить тот же whitout с помощью onclick (tip... проверьте раздел на jquery о событиях)

Я сделал простую скрипку в качестве примера вашей проблемы, используя некоторые логотипы google... Тип 4 o 3 в коробке и вы будете два изображения разного размера. (огорченный.. У меня нет времени искать лучшие изображения в качестве примера)

http://jsfiddle.net/HsnSa/

-1