img标签渲染base64的图片

是菜菜的小前端啊

已于 2024-12-17 15:57:24 修改

阅读量2.1k

点赞数

文章标签： javascript html

于 2023-03-27 15:28:56 首次发布

本文链接：https://blog.youkuaiyun.com/YYuea/article/details/129796342

版权

这段代码展示了一个JavaScript函数，当点击按钮时，它会检查输入框中的数据是否已经是以base64编码的图片。如果不是，它会将数据添加到相应的dataURI格式中，使其成为有效的JPEG、PNG或GIF图片源，然后将其赋值给图片元素的src属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将src拼上 data:image/jpeg;base64 即可，注：不同类型 image/jpeg 进行修改

		<input id= "data" type="text"><br>
        <button type="button" id="btn">转换</button><br>
        <img id="img">
        <script>

    $("btn").on("click", function () {
        if ($("#data").val().indexOf("base64") != -1) {
            $("#img").attr("src", $("#data").val());
        } else if ($("#data").val().indexOf("data:image/jpeg;base64") == -1) {
            $("#img").attr("src", "data:image/jpeg;base64," + $("#data").val());
        } else if ($("#data").val().indexOf("data:image/png;base64") == -1) {
            $("#img").attr("src", "data:image/png;base64," + $("#data").val());
        } else if ($("#data").val().indexOf("data:image/gif;base64") == -1) {
            $("img").attr("src", "data:image/gif;base64," + $("#data").val());
        }
    })
</script>