如何通过点击按钮插入图片？（基于Kivy框架）

下面分两种常见场景给出具体实现代码：

一、插入项目本地文件夹内的固定图片 #

如果图片已经存放在你的网页项目本地目录中（比如images子文件夹），可以直接通过相对路径调用：

<!DOCTYPE html>
<html>
<body>
  <button id="insertBtn">插入本地图片</button>
  <div id="imageContainer"></div>

  <script>
    const insertBtn = document.getElementById('insertBtn');
    const imageContainer = document.getElementById('imageContainer');

    insertBtn.addEventListener('click', () => {
      // 创建img元素
      const img = document.createElement('img');
      // 替换为你实际的图片相对路径
      img.src = './images/small-img.jpg';
      img.alt = '本地小图片';
      // 可选：设置图片尺寸
      img.style.width = '200px';

      // 将图片插入到页面容器中
      imageContainer.appendChild(img);
    });
  </script>
</body>
</html>

注意：确保./images/small-img.jpg路径和你项目中图片的实际位置完全匹配，路径大小写在Linux/Mac系统下需严格对应。

二、让用户选择本地电脑中的任意图片插入 #

如果需要允许用户自行选择本地电脑里的图片文件插入，可通过文件选择器+FileReader实现：

<!DOCTYPE html>
<html>
<body>
  <!-- 隐藏原生文件选择框，用按钮触发 -->
  <input type="file" id="fileInput" accept="image/*" style="display: none;">
  <button id="selectInsertBtn">选择并插入本地图片</button>
  <div id="imageContainer"></div>

  <script>
    const selectBtn = document.getElementById('selectInsertBtn');
    const fileInput = document.getElementById('fileInput');
    const imageContainer = document.getElementById('imageContainer');

    // 点击按钮唤起文件选择框
    selectBtn.addEventListener('click', () => fileInput.click());

    // 选择文件后处理并插入图片
    fileInput.addEventListener('change', (e) => {
      const selectedFile = e.target.files[0];
      if (!selectedFile) return;

      // 校验是否为图片类型
      if (!selectedFile.type.startsWith('image/')) {
        alert('请选择有效的图片文件');
        return;
      }

      // 读取图片文件并转为可预览的DataURL
      const reader = new FileReader();
      reader.onload = (event) => {
        const img = document.createElement('img');
        img.src = event.target.result;
        img.alt = '用户选择的图片';
        img.style.width = '200px';
        imageContainer.appendChild(img);
      };
      reader.readAsDataURL(selectedFile);
    });
  </script>
</body>
</html>

说明：这种方式不需要上传图片到服务器，直接在浏览器内读取并预览本地图片，避免了跨域或服务器依赖问题。

内容的提问来源于stack exchange，提问作者user15356580