如何从 HTML JavaScript 中的输入文本显示图像？
[英]How to display an image from input text in HTML JavaScript?
问题描述
I need to display a picture of a duck on my webpage when the user types in "show duck image" in the text field and clicks a button "Execute command".
当用户在文本字段中输入“显示鸭子图像”并单击“执行命令”按钮时，我需要在我的网页上显示鸭子的图片。
The text field has numerous commands, hence the 'else if' statements.文本字段有许多命令，因此有“else if”语句。 Here is what I have so far, when I trial the duck command, no image is displayed.这是我到目前为止所拥有的，当我试用duck 命令时，没有显示任何图像。 Any help would be greatly appreciated!任何帮助将不胜感激！
function theCommand(imageFile) { var commandInput = document.getElementById("commandInput"); var command = commandInput.value; var image = document.getElementById("imgResult"); image.src = imageFile; if (command == "make duck noise") { command = "QUACK QUACK"; } else if (command == "make rooster noise") { command = "COCK-A-DOODLE-DOO"; } else if (command == "show duck image") { command == imageFile; } else if (command != "make duck noise" || command != "make rooster noise") { command = "Invalid command"; } var commandSpan = document.getElementById("result"); commandSpan.innerHTML = command; }
<html> <body> Enter command: <input type="text" id="commandInput" /> <button onClick="theCommand('duck.png')">Execute command</button> <br /> <br /> <span id="result"></span> <img id="imgResult"/> </body> </html>
3 个解决方案
解决方案1
1 已采纳 2020-09-11 17:43:33
Add an IMG-element to your command helps.将 IMG 元素添加到您的命令帮助中。
function theCommand(imageFile) { var commandInput = document.getElementById("commandInput"); var command = commandInput.value; var image = document.getElementById("result"); image.src = imageFile; if (command == "make duck noise") { command = "QUACK QUACK"; } else if (command == "make rooster noise") { command = "COCK-A-DOODLE-DOO"; } else if (command == "show duck image") { command = "<img src='https://www.checkeins.de/sendungen/die-sendung-mit-der-maus/die-sendung-mit-dermaus-ente-100~_v-standard644_5fdf7b.jpg'></img>"; } else if (command != "make duck noise" || command != "make rooster noise") { command = "Invalid command"; } var commandSpan = document.getElementById("result"); commandSpan.innerHTML = command; }
<html> <body> Enter command: <input type="text" id="commandInput" /> <button onClick="theCommand('duck.png')">Execute command</button> <br /> <br /> <span id="result"></span> </body> </html>
解决方案2
0 2020-09-11 17:39:33
You should use a <img> element to display images.您应该使用<img>元素来显示图像。
<img id="imgResult"/>
var image = document.getElementById("imgResult");
image.src = imageFile;
解决方案3
0 2020-09-11 18:36:57
You need to use an HTML <img> tag as the HTML that you put inside the result.您需要使用 HTML <img>标记作为放入结果中的 HTML。 The other command values are plain text, which works as .innerHTML .其他command值是纯文本，用作.innerHTML 。 To show an image properly, we need a full <img src="duck.png"> string.为了正确显示图像，我们需要一个完整的<img src="duck.png">字符串。
For demonstration, I changed the HTML snippet to reference a public duck image.为了演示，我更改了 HTML 片段以引用公共鸭子图像。
function theCommand(imageFile) { var commandInput = document.getElementById("commandInput"); // By default, set the result value to the form input's value (a string of text) var command = commandInput.value; if (command == "make duck noise") { command = "QUACK QUACK"; } else if (command == "make rooster noise") { command = "COCK-A-DOODLE-DOO"; } else if (command == "show duck image") { // For the image case, set result to be an HTML <img> element with src value passed in command = '<img src="' + imageFile + '">'; } else if (command != "make duck noise" || command != "make rooster noise") { command = "Invalid command"; } var commandSpan = document.getElementById("result"); // When command is "show duck image", `command` var will have a functional <img> tag in it // instead of plain text commandSpan.innerHTML = command; }
<html> <body> Enter command: <input type="text" id="commandInput" /> <button onClick="theCommand('https://images.unsplash.com/photo-1459682687441-7761439a709d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80')">Execute command</button> <br /> <br /> <span id="result"></span> </body> </html> The logic for the conditional statement seems like it might not work as intended.条件语句的逻辑似乎可能无法按预期工作。 The check for else if (command != "make duck noise" || command != "make rooster noise") { is redundant becuase those strings were already checked higher up in the conditional.对else if (command != "make duck noise" || command != "make rooster noise") {检查是多余的，因为这些字符串已经在条件语句的更高层进行了检查。 It can be refactored to simply use else as a catch all:它可以被重构为简单地使用else作为一个包罗万象的：
if (command == "make duck noise") {
command = "QUACK QUACK";
} else if (command == "make rooster noise") {
command = "COCK-A-DOODLE-DOO";
} else if (command == "show duck image") {
// For the image case, set result to be an HTML <img> element with src value passed in
command = '<img src="' + imageFile + '">';
} else {
command = "Invalid command";
}
When conditional logic ends up needing a lot of specific cases ( else if s) like this, doing some refactoring can make the code much easier to work with.当条件逻辑最终需要像这样的大量特定情况（ else if s）时，进行一些重构可以使代码更容易使用。 I highly recommend checking out 5 Tips to Write Better Conditionals in JavaScript ― Scotch.io .我强烈建议查看在 JavaScript 中编写更好条件的 5 个技巧——Scotch.io 。 The section "Favor Map / Object Literal than Switch Statement https://scotch.io/bar-talk/5-tips-to-write-better-conditionals-in-javascript#toc-4-favor-map-object-literal-than-switch-statement" is particularly useful for your example: “偏好映射/对象文字而不是开关语句https://scotch.io/bar-talk/5-tips-to-write-better-conditionals-in-javascript#toc-4-favor-map-object-literal”部分-than-switch-statement”对您的示例特别有用：
function theCommand(imageFile) { var commandInput = document.getElementById("commandInput"); // By default, set the result value to the form input's value (a string of text) var command = commandInput.value; var commandMap = { 'make duck noise': "QUACK QUACK", 'make rooster noise': "COCK-A-DOODLE-DOO", 'show duck image': '<img src="' + imageFile + '">', } var commandSpan = document.getElementById("result"); // Set inner HTML of result element to the value returned by the command map // or use a default string if the command given is not in the map commandSpan.innerHTML = commandMap[command] || 'Invalid command'; }
<html> <body> Enter command: <input type="text" id="commandInput" /> <button onClick="theCommand('https://images.unsplash.com/photo-1459682687441-7761439a709d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80')">Execute command</button> <br /> <br /> <span id="result"></span> </body> </html> The code above also has an added benefit of not mutating the original command variable, so the original user input value is never lost during program execution.上面的代码还有一个额外的好处，即不会改变原始command变量，因此原始用户输入值在程序执行过程中永远不会丢失。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.