html - 如何连接 <img src ="string"+document.getElementById (' ' ).value

标签 html css

我正在尝试使用 <img src="" 显示图像与图像路径,但添加实际的 image.png 文件作为文本字段中的变量。我不断收到文件不存在的错误...但它确实存在。

我尝试在网上搜索,但没有任何内容适合这个特定问题。

<label class="buslabel" for="Name">Window Pane Image:
   <strong><input id="WindowPaneImage" style="margin-left: 10px; border: 
      none; padding: 0;" type="text" class="busaddinput" 
      placeholder="Image.png" name="WindowPane" size="15" maxlength="15"        
      ></strong>
 </label>


<img src="C:/Users/jaydr_000/Desktop/Web Development/SFF/Vend-images/ + 
   document.getElementById('WindowPaneImage').value" 
   class="FrameRectangle">

需要能够获取输入字段[图像名称]并将其传递给

我不断收到文件不存在的错误...,它确实存在。

最佳答案

这似乎可以完成工作:只要您输入图片名称并单击任意位置,就会提供新图像。

<body>
    <label class="buslabel" for="Name">Window Pane Image:
        <strong>
            <input 
                id="WindowPaneImage"
                style="margin-left: 10px; border: none; padding: 0;" 
                type="text" 
                class="busaddinput" 
                placeholder="Image.png" 
                name="WindowPane" 
                size="100" 
                maxlength="100"
                onchange="foo()"
            >
        </strong>
    </label>
    <img src= "" class="FrameRectangle" id="img">
    <script>  
        function foo(){  
            var name1 = document.getElementById("WindowPaneImage").value;  
            document.getElementById("img").src = name1; 
        }
    </script>  
</body>

关于html - 如何连接 <img src ="string"+document.getElementById (' ' ).value,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56707994/

相关文章:

css - 如何让一个 div 排在另一个 div 的右边而不是下面?

javascript - 没有滚动条并排显示图像

css - 在 rails 中的 bootstrap btn-group 中排列一个 form_for 按钮

html - Internet Explorer 7 css 颜色和边框冲突

javascript - 删除已加载到 div 中的页面

html - div 右对齐 : incorrect scrollbar

html - 跨浏览器的不同页面 View

HTML `dialog` 元素 : scroll content independently of background

javascript - 使用javascript显示基于两个html选择的输出

html - 伪元素破坏 justify-content : space-between in flexbox layout