前端-01-如何获取网络图片的路径

于 2024-05-02 16:39:04 发布
阅读量254 收藏 1
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64150479/article/details/138394406
版权

目录


前几天我想把代码上传到码上掘金，但是因为代码中有图片（该图片是我从网上找的，下载到了电脑），但是码上掘金上又无法上传图片，那我的图片怎么办呢？怎么写路径能让它显示呢？

方法如下

  • 在百度搜索到我需要的图片
  • 鼠标放在图片上，点击鼠标右键
  • 查看该图片的src，复制下来就可以用了
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
唐小橘子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过JS获取用户本地图片路径并显示的代码
10-28
通过JS获取用户本地图片路径并显示的代码，多用于本地上传图片的预览效果
解决vue的 v-for 循环中图片加载路径问题
10-18
然而，在处理图片加载时，尤其是在图片路径与数据动态绑定的情况下，可能会遇到一些问题。本文将深入探讨如何解决Vue的`v-for`循环中图片加载路径的问题。 首先，我们需要理解问题的背景。在一个实际项目中，产品...
微信小程序上传多张图片-视频，预览图片
xiexikk的博客
06-11 5919
考虑到日常项目会用到，就整理了一下这案例，可以上传指定数量的图片或视频； wxml: <view class='the-tit'>上传图片：</view> <view class='share-pics'> <view class='slug-cons'> <view class='pics'> <view ...
前端模拟 图片上传---->>通过选取的图片获取其路径<<------
weixin_34051201的博客
12-24 324
<head> <meta charset="UTF-8"> <title>Title</title> <style> div { position: relative; overflow: hidden; ...
前端学习——图片 路径
Malicious_lies的博客
01-17 2836
一、相对路径： a：同级：图片名.格式（./图片名) 图片跟html文件在同一个文件夹下时-直接用图片的名称即可 或者./图片的名称。 b：下级： 文件名/图片名.格式( ./文件名/图片名）图片的上层文件夹跟HTML在同一个文件夹下时-先找到图片的上层文件夹然后再依次找到图片。 c：上级; ../文件名/图片名.格式（ ../文件名/图片名）图片位于HTML的上层文件时- ../向上去找。 二、绝对路径： a：对于网络而言-直接右击复制图片的网址。<img src="网页图片地址" a..
JS_js获取文件路径,js获取图片路径
小歪博客
10-31 2314
//获取文件路径 function getObjectURL(file) { var url = null if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file) } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.crea
Vue+SpringBoot项目前端如何获取本地磁盘路径的照片
m0_75015491的博客
11-26 1691
今日项目中遇到的问题：在页面想要展示本地磁盘路径的照片，但是一直无法显示出来原因：可能是vue无法直接读取本地磁盘的照片（本人盲猜）
前端练习01-前端-HTML（image）
03-25
2. **alt属性**：这个属性提供了图像的替代文本，当图像无法显示（如网络加载失败或用户禁用了图片显示）时，替代文本会显示出来，同时对于屏幕阅读器的用户来说，这也是非常重要的可访问性功能。在编写`alt`文本时...
前端-html-0预习
最新发布
12-26
图片标签（img）用于插入图像，其src属性指定图像路径，alt属性提供图像描述，高度和宽度属性（height和width）用于设定图像尺寸；链接标签（a）用于创建超链接，href属性指定链接地址，target属性决定新页面的打开...
web前端--添加、显示表情图片
03-22
在Web前端开发中，添加和显示表情图片是增强用户交互体验的重要一环，尤其是在社交应用、聊天室或者论坛等场景中。表情图片可以是简单的文本表情（如：`:smile:`），也可以是复杂的图像文件（如：.gif或.png）。本篇...
美图大测试- 网络地址 - json格式
02-28
美图大测试- 网络地址 - json格式
简单的图片上传--龙哥.zip
04-14
在IT行业中，图片上传是网页或应用程序的基本功能之一，它涉及到前端开发、后端处理以及存储服务等多个层面。"简单的图片上传--龙哥"这个项目可能是为了教学或演示如何实现一个基本的图片上传功能。下面将详细介绍这...
DataUrl base64代替图片地址的前端性能实测
weixin_39921970的博客
02-23 751
data url 性能测试 （base64代替图片地址的前端性能实测） 材料： 图片100kb 测试云服务器：4核8G5M带宽 本地环境：win64 8核16G 线上加载 https://blog.csdn.net/liujie19901217/article/details/52074018?ops_request_misc=%25257B%252522request%25255Fid%252522%25253A%252522161260443816780269896665%252522%25252C%
获取用户上传的图片的本地路径实现方法，解决fakepath路径问题
热门推荐
yuknee的博客
01-24 1万+
最近项目要实现一个用户上传图片之后能够进行预览功能，由于计算机不予许浏览器获取到本地资源的真实路径，防止被窃取信息，使用原本的方法获取到的本地路径却是被加密处理过的，无法直接使用。经过一番查阅终于找到了一个比较实用的方法，亲测可以使用，所以来进行记录一下，也分享给大家，以供参考。 以下就是代码： <%@ page language="java" contentType="text/html
测试图片，视频 地址
weixin_42340514的博客
04-14 6884
https://i.loli.net/2021/04/14/nNly8EdXJ2aHYTe.jpg https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a4
获取前端图片并且储存和保存地址
BIG__NUT的博客
05-17 307
String div=getServletContext().getRealPath("/图片的文件夹");Part part=request.getPart("接口");//图片缓存到Servlet。//存储到ajax发送到前端。//获取想要存储图片的路径。//存储数据库的路径信息。通过名字获取图片的类型。
微信小程序测试用免费在线图片地址
qq_54727445的博客
05-05 306
微信小程序测试用免费在线图片地址，测试过，能用【转载】链接：https://juejin.cn/post/6844904088686034951。商业转载请联系作者获得授权，非商业转载请注明出处。作者：天山之巅(sunjianwen)
【前端】测试占位图片在线制作
分享记录开发中的问题，欢迎一起探讨！
12-29 399
有时候我们开发需要一个占位图来测试大致的效果，这时候就可以使用在线的一个可访问的地址。 https://fakeimg.pl/375x625/F44336/FFF/?font=noto&text=杰肥啊 375x625           代表宽度和高度，可以自己根据需要定义 font        &nbsp
前端把base64码怎么换成网络url路径
06-08
前端将base64编码的内容转换成网络URL路径，可以使用以下两种方式： 1. 使用URL.createObjectURL方法将Blob对象转换成URL路径。 ```javascript function convertBase64ToUrl(base64Str) { // 将base64编码的内容转换成Blob对象 const blob = dataURItoBlob(base64Str); // 使用 URL.createObjectURL 方法将 Blob 对象转换成 URL 路径 const url = URL.createObjectURL(blob); // 使用该 URL 路径来显示图片或其他类型的文件 displayFile(url); } function dataURItoBlob(dataURI) { // 将dataURI转换成Blob对象 const byteString = atob(dataURI.split(',')[1]); const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; const ab = new ArrayBuffer(byteString.length); const ia = new Uint8Array(ab); for (let i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ab], { type: mimeString }); } ``` 在上面的代码中，`convertBase64ToUrl`函数接收一个base64编码的字符串，将其转换成Blob对象并使用`URL.createObjectURL`方法将其转换成URL路径。`displayFile`函数用于使用该URL路径来显示图片或其他类型的文件。`dataURItoBlob`函数用于将base64编码的字符串转换成Blob对象。 2. 直接使用base64编码的字符串作为URL路径。 ```javascript function convertBase64ToUrl(base64Str) { // 使用 base64 编码的字符串作为 URL 路径 const url = `data:image/png;base64,${base64Str}`; // 使用该 URL 路径来显示图片或其他类型的文件 displayFile(url); } ``` 在上面的代码中，`convertBase64ToUrl`函数接收一个base64编码的字符串，直接使用base64编码的字符串作为URL路径。`displayFile`函数用于使用该URL路径来显示图片或其他类型的文件。需要注意的是，直接使用base64编码的字符串作为URL路径可能会导致URL过长，不适合用于大文件的显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值