Html 如何定制wtforms'；文件字段作为图像按钮？

我正在尝试从项目文件夹中加载一个图像作为图标，而不是普通的“选择文件”。这是我到目前为止试过的。不仅图像未加载，旧按钮仅显示一半

HTML

---

最简单的方法之一是将文件

input

包装成

标签

，并设置样式

关于设置本机元素样式的跨浏览器规范正在改进。但是，如果您需要防弹支持，这仍然是最好的方法

文件{
显示：块；
位置：相对位置；
宽度：200px；
高度：200px；
背景：url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/device-camera-icon.png)无重复中心；
背景尺寸：封面；
}
.文件输入{
不透明度：0；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
光标：指针；
}

---

最简单的方法之一是将文件

输入

包装到

标签

中，并设置样式

关于设置本机元素样式的跨浏览器规范正在改进。但是，如果您需要防弹支持，这仍然是最好的方法

文件{
显示：块；
位置：相对位置；
宽度：200px；
高度：200px；
背景：url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/device-camera-icon.png)无重复中心；
背景尺寸：封面；
}
.文件输入{
不透明度：0；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
光标：指针；
}

是否有办法将图标图像存储在项目文件夹中，并使用background:url调用它，而不是使用web上的图像链接？是的，只需将其替换为您自己的url即可。我使用了一些随机的东西，因为我显然无法访问您的文件和环境。每当我尝试用图像路径（../templates/images/file_name.png）替换url时，按钮就会消失，那么您的路径就错了。我不知道你的文件夹结构。我再次检查。文件夹路径没有错误。即使在我打字的时候，IDE也为我提供了路径建议。也许url只有在它是web链接而不是文件夹路径时才起作用？有没有一种方法可以将图标图像存储在项目的文件夹中，并使用background:url来调用它，而不是使用web上的图像链接？是的，只需将其替换为您自己的url即可。我使用了一些随机的东西，因为我显然无法访问您的文件和环境。每当我尝试用图像路径（../templates/images/file_name.png）替换url时，按钮就会消失，那么您的路径就错了。我不知道你的文件夹结构。我再次检查。文件夹路径没有错误。即使在我打字的时候，IDE也为我提供了路径建议。也许url只有在它是web链接而不是文件夹路径时才起作用？

<div>{{ form.tweet_image(class="submit-image-tweet")}}</div>

.submit-image-tweet {
    background: url(../templates/images/camera_icon.png) no-repeat;
    cursor: pointer;
    border: none;
    width: 40px;
    height: 40px;
}