从表单中的文本字段替换图像的 src 属性答案

【问题标题】：Replace the src attribute of an image from a text field in a form从表单中的文本字段替换图像的 src 属性
【发布时间】：2020-06-16 03:59:23
【问题描述】：

在用户使用提交按钮在文本字段中输入文本后，我试图找到一种从目录加载图像的方法。（只需放置一个显示结果的搜索按钮）但是客户端没有数据库并且它不愿意更新他当前过时的设置。（照片是在游乐园拍摄的，并通过 FTP 发送到他服务器上的文件夹。）他当前的站点是 php。我的困难在于创建一个现代网站，让客户可以选择在他的网站上搜索他们的图像。我想知道是否可以根据客户在他们提交的文本字段中写入的内容来更改图像 src 属性。（如果可能，更改图像属性也可以避免每次有人搜索时重新加载页面？）

【问题讨论】：

你能发布一些你尝试过的东西吗

标签： html forms attributes src

【解决方案1】：

虽然这听起来像是一个糟糕的设置，但您绝对可以根据用户交互通过 javascript 更改元素的 src 属性。

首先你需要在你想要观看的输入元素上放置一个监听事件

let myInput = document.getElementByID('whateverYourIDis')
myInput.onchange = function(){ 

let theImage = document.getElementById('idOfImage')

let searchTerm = myInput.value;
theImage.src = searchTerm;
  }

这将简单地将 src 属性更改为等于用户在输入中键入的任何内容，您需要添加一些代码以使用输入的值在文件结构中搜索匹配的文件

【讨论】：