img加载图片的三种方式

这篇具有很好参考价值的文章主要介绍了img加载图片的三种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

方式一:src指向图像的位置

最常用的一种方式,无需搭配后端代码

<img src="img/boat.gif" alt="Big Boat">

方式二:src执行后台路径,获取图片的字节数组

前端代码

<img src="/getImage" alt="Big Boat">

后端代码

@GetMapping("getImage")
    public void image(HttpServletResponse response) throws IOException {

        try(InputStream input = new FileInputStream("D:\\个人资料\\图片\\Picture\\lf.jpg");
            OutputStream output = response.getOutputStream()){
            output.write(input.readAllBytes());
        }

    }

方式三:src指向后台路径,获取图片字节数组的base64编码(字符串)

​前端代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery.js"></script>
    <style>
        .main{
            display: flex;
        }
        .imgdiv{
            text-align: center;
            margin: 5px;
        }
        .imgdiv p{
            font-weight: bold;
            font-size: 22px;
        }
        img{
            width: 200px;
            height: 250px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="imgdiv">
        <img id="img1" src="">
    </div>
    <div class="imgdiv">
        <img id="img2" src="">
    </div>
</div>
</body>
<script>
    $(document).ready(function () {
        var params = {
            "img1": "dog.jpg",
            "img2": "cat.jpg"
        };
        fetch("/getImage", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify(params)
        }).then(res => res.json()).then(res => {
            for (var p in res) {
                $("#" + p)[0].src = "data:image/jpg;base64," + res[p];
            }

        })
    });

</script>
</html>

后端代码文章来源地址https://www.toymoban.com/news/detail-727196.html

@PostMapping("getImage")
public Map<String, String> image(@RequestBody Map<String, String> map) throws Exception {
    String baseImgUrl = "D:\\个人资料\\图片\\Picture\\";
    Map<String, String> imageMap = new HashMap<>();
    for (Map.Entry<String, String> entry : map.entrySet()) {
        String imageId = entry.getKey();
        // 图片名称
        String imageName = entry.getValue();
        // 最终图片路径
        String imgUrl = baseImgUrl + imageName;
        try (InputStream input = new FileInputStream(imgUrl)) {
            String b64encoded = Base64.getEncoder().encodeToString(input.readAllBytes());
            imageMap.put(imageId, b64encoded);
        }
    }
    return imageMap;
}

到了这里,关于img加载图片的三种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端单点登录实现的三种方式

    1.同源不跨域 使用document.cookie或者localStorage可以直接存取 2.跨域主域名相同 可以使用cookie-js插件存储cookie,在设置cookie是添加domain参数,例如 Cookies.set(\\\'token\\\', 值, { expires: 60, path: \\\'\\\', domain: \\\'taobao.com\\\' }) 只有主域名相同,浏览器在访问时才会携带对应的 cookie 3.跨域 使用iframe内嵌

    2024年04月27日
    浏览(36)
  • 将Echarts图表导出为图片的三种方式

     第一种  使用  html2canvas 对dom元素截图     1.npm安装        yarn安装     2.组件引入     3.代码 第二种 使用Echarts官方文档中的 getDataURL 方法 第三种 使用Echarts官方文档中的 toolbox 完整代码

    2024年02月12日
    浏览(40)
  • 01_前端css编写的三种方式

    前言 CSS的引入方式共有三种:行内样式、内部样式表、外部样式表 用法: 在元素上直接通过style属性进行设置css样式设置 示例: 实际在写页面时不提倡使用,在测试的时候可以使用。 例如: 用法: 在style标签中书写CSS代码。style标签写在head标签中 例如: 用法: CSS代码保

    2024年02月09日
    浏览(41)
  • 前端终止请求的三种方式(ajax、axios)

    一、原生ajax终止请求 1、abort() ​ XMLHttpRequest.abort() 方法用于终止 XMLHttpRequest 对象的请求,该方法没有参数,也没有返回值。当调用该方法时,如果对应 XMLHttpRequest 对象的请求已经被发送并且正在处理中,则会中止该请求;如果请求已经完成(即已经接收到完整的响应),则

    2024年02月09日
    浏览(46)
  • 十分钟掌握前端获取实时数据的三种主流方式

    前端获取实时数据的三种主流方式 本文聊聊前端获取实时数据的三种主要方式。想象一下,我们在网上购物时,经常能看到最新的优惠信息弹出,或者在社交媒体上看到朋友的最新动态更新。这些都是因为后端在默默地向我们的页面推送了最新的消息。那么,这背后到底使用

    2024年02月21日
    浏览(44)
  • 估计很多人不知道:在PowerPoint中插入图片的三种方式用法和解析

    你知道吗?在我们用PowerPoint制作PPT的时候,往幻灯片中插入本地图片时,除了默认的“插入”按钮,点击插入按钮右边的箭头,还有链接到文件、插入和链接两个选项。 那么,在PowerPoint中插入图片是的插入、链接到文件、插入和链接这三个选项分别是什么含义?有什么作用

    2024年02月04日
    浏览(38)
  • 前端常用的三种加密方式(MD5、base64、sha.js)

    作为一名优秀的前端开发工程狮,保障用户的信息安全、密码义不容辞,废话不多说,由我来介绍三种日常开发中经常用到的加密方式。 介绍: MD5中文含义为信息-摘要算法5,就是一种信息摘要加密算法,可以将数据转译为另一固定长度值 特点: 压缩性:任意长度的数据,

    2024年02月06日
    浏览(54)
  • 本地前端项目使用gitee仓库外链图片加载失败

    错误: 本地的前端项目,比如vue,纯html使用 img/ 标签加载gitee保存的图片文件的时候,浏览器加载失败。 但是gitee可以正常访问图片  解决办法: 在index.html中加入meta标签就可以完美解决 referrer 策略是一种 网络安全手段 ,在请求中会带有referrer。 要是vue项目的话,直接去

    2024年02月16日
    浏览(51)
  • js实现img图片懒加载

    在前端中,可以使用 JavaScript 来实现图片的懒加载。下面是一种常见的实现方式: 在 HTML 文件中,将需要懒加载的图片的 src 属性替换为一个占位符,例如使用一个透明的空白图片或者是一个包含背景色的 div。 给这些图片添加一个自定义的属性,例如 data-src ,并将真实的图

    2024年02月11日
    浏览(35)
  • JavaScript中常用的三种弹窗

    目录 一、alert(警告框) 二、confirm(确认框) 三、prompt (提示框)   JavaScript 中可以创建三种消息框:警告框、确认框、提示框。         alert()方法是显示一条弹出提示消息和确认按钮的警告框。 需要注意的是 :         alert()是一个阻塞的函数,如果我们不点确认

    2024年02月13日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包