通过url地址引用图片——在使用JavaScript实现换肤效果时遇到的一个问题——回顾HTML与CSS的地址引用

最新推荐文章于 2024-07-12 21:49:18 发布
原创 最新推荐文章于 2024-07-12 21:49:18 发布 · 1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html #javascript #前端

本文介绍了在使用JavaScript实现换肤功能时遇到的问题，主要涉及CSS和HTML中引用图片的路径理解。作者通过案例分析了CSS背景图片加载失败和JavaScript动态修改样式时的路径问题，指出CSS路径以自身文件夹为原点，而JavaScript中的路径以HTML文件为原点。通过修正路径，成功解决了图片引用问题。

先看一下最终效果，这样的一个小练习：通过点击这几个图片，实现背景图片的切换

实现这个小练习的代码也很简单，无非是那么几样，带着这样的想法，我翻车了

以下为翻车过程回溯与反思：
首先，创建一个文件夹，这样的、、、（埋下祸根）

在使用CSS添加背景图片的时候，我翻了第一次车：背景图片无法加载，打开调试控制台，在那里点开图像显示页面载入出错

 background-image: url(backgroundImages/1.jpg);

罪魁祸首在这，这行代码乍一看貌似没什么毛病，向下寻找，找到那张背景图

可是，仔细推敲，越想越不对劲：

     这行代码是CSS文件中的代码，索引是以这个CSS文件所在文件夹为原点进行索引

而我误以为这个是以html文件为原点进行索引。。。。。。

background-image: url(../backgroundImages/1.jpg);

小改一下，背景图片就加载好了[笑cry]

带着痛定思痛的心情，我在js文件那里翻了第二次车

无它，我的JS代码是这样的：


                

        

    

  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序

				
			

			

				

					努力是为了站在万人之中，成为别人的光
				

				

					07-25
					
					4万+
					
				

			

		

		

			
				
今天我将使用 Wea​​ther 和 Unsplash API 以及倾斜效果和玻璃形态外观创建凉爽的天气应用程序

⛅ Weather.io ☔⚓ 第 1 步 - 设置环境并收集所有资源 第 2 步 - 从 index.html 开始 第 3 步 - 设置索引文件的样式 第 4 步 - 获取 Weather API 和 Unsplash API 密钥 第 5 步 - 从 JavaScript 编码开始 第 6 步 - 免费托管您的网站！

			
		

	



                

            
              



	

		

			

				
					
如何使用CSS实现一个无限循环滚动的图片轮播效果

					
最新发布

				
			

			

				

					一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
				

				

					09-06
					
					5507
					
				

			

		

		

			
				
在网页设计中，图片轮播（Carousel）是一种常见的视觉效果，它可以用来展示一系列的图片、广告或者其他内容。我们将从基本概念入手，逐步深入到具体的实现步骤，并提供完整的代码示例，帮助你理解和实现这一功能。通过本文的介绍，我们不仅学会了如何使用纯CSS实现无限循环滚动的图片轮播效果，还探讨了如何进一步增强轮播的交互性和响应性。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过添加按钮或滑动事件，可以让用户手动控制图片的滚动，增加交互性。

			
		

	



              


  
              

                


	

		

			

				
					
Web开发：使用url引用图片

				
			

			

				

					Weiki的博客
				

				

					05-03
					
					1853
					
				

			

		

		

			
				
Web开发：使用url引用图片

			
		

	





	

		

			

				
					
HTML:url引用文件夹中图片的格式

				
			

			

				

					xlpda的博客
				

				

					11-26
					
					3573
					
				

			

		

		

			
				
直接进正题

假如我在index.html中有一段
background: url() no-repeat;

怎么去引用与index同一级文件夹下的bg.gif图片呢
../Pictures/bg.gif

…/表示当前文档的上一级文件夹
/可以理解为"进入,选择,打开"的意思,拿上面的代码举例,可以翻译为:"我要调用我上一级文件夹中的Pictures文件,进入index文件后再选择bg.gif文件"

同理,将bg.gif移除刚才的文件夹,使其与index文件夹同级,这时我的调用代码就变成了
../bg

			
		

	



		

			
		



	

		

			

				
					
java引用图片_怎样在java里用URL引入图片引入图片

				
			

			

				

					weixin_35976993的博客
				

				

					02-15
					
					1037
					
				

			

		

		

			
				
展开全部查看API可通过 JLabel构造函数，62616964757a686964616fe58685e5aeb931333332613663也可使用setIcon(Iconicon)函数，下面给出一个列子！看楼主提问，主要想知道路径怎么得来！可使用this.getClass().getResource("/")获取的是class文件编译后放置的绝对路径。this.getClass()....

			
		

	





	

		

			

				
					
java 添加 url 图片_怎么样在java里用URL引入图片引入图片

				
			

			

				

					weixin_33318791的博客
				

				

					02-13
					
					595
					
				

			

		

		

			
				
查看API 可通过  JLabel构造函数，也可使用setIcon(Icon icon) 函数，下面给出一个列子！看楼主提问，主要想知道路径怎么得来！可使用this.getClass().getResource("/")获取的是class文件编译后放置的绝对路径。this.getClass().getResource("/images/a.png");编译地址/images/a.png (详见代码...

			
		

	





	

		

			

				
					
提取html里面url()导入的图片正则表达式

				
			

			

				

					dichandai2318的博客
				

				

					04-09
					
					231
					
				

			

		

		

			
				
之前写过一次，后来无意发现还是有问题，比如<a onclick="openZoosUrl('chatwin','param');
这个click事件函数里面就有url()部分，造成了提取错误。

前面改动了一下，看上去挺好。

$pattern = '/(:|\s*)url\s*\(\s*(\'|\")?([^\s\'\"]*?)\2?\)/i';


　　
...

			
		

	





	

		

			

				
					
Web开发 —— 放大镜效果（HTML、CSS、JavaScript）

				
			

			

				

					m0_65029152的博客
				

				

					07-12
					
					3658
					
				

			

		

		

			
				
本文记录一下，使用HTML、CSS、JavaScript实现放大镜效果的过程，以及相关代码；

			
		

	





	

		

			

				
					
html期末作业代码网页设计——化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）

				
			

			

				

					qq_524614081的博客
				

				

					01-07
					
					2722
					
				

			

		

		

			
				
HTML5期末大作业：化妆品电商网站设计——化妆品电商网站(4页) HTML+CSS+JavaScript  使用html+css实现一个静态页面（含源码）

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计

			
		

	





	

		

			

				
					
使用html+css实现一个静态页面——我的家乡-杭州(7页) HTML+CSS+JavaScript 大学生家乡网页作品 老家网页设计作业模板 学生网页制作源代码下载

				
			

			

				

					
				

				

					12-02
					
					2646
					
				

			

		

		

			
				
HTML5期末大作业：我的家乡网站设计——我的家乡-杭州(7页) HTML+CSS+JavaScript  大学生家乡网页作品 老家网页设计作业模板 学生网页制作源代码下载

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网

			
		

	





	

		

			

				
					
vuejs background怎么url进入图片

				
			

			

				

					weixin_40981660的博客
				

				

					09-30
					
					458
					
				

			

		

		

			
				
vuejs background怎么url进入图片

			
		

	





	

		

			

				
					
html外链css报错,css使用url引用图片报错

				
			

			

				

					weixin_39877504的博客
				

				

					06-20
					
					944
					
				

			

		

		

			
				
css使用url引用图片报错css使用url引用图片报错，是因为图片路径填写错误，路径需要相对于css文件，而不是引用css文件的html文件。例如：css文件夹下的index.css样式表中background要引入images文件夹下的guanggao.jpg图片。正确的写法是：background: url("../images/guanggao.jpg");误区：一直以为，当在html中引...

			
		

	





	

		

			

				
					
TP5背景图，‘url()‘的引入方法

				
			

			

				

					weixin_44432032的博客
				

				

					02-26
					
					858
					
				

			

		

		

			
				
TP5引入图片的两种方式：
第一种情况：
有时候会遇到“url”引入图片的方式，此方法多用于背景图里面。而背景图的引用是CSS里面特有的一种引入图片的方式。 可根据需求，我们也会在背景图里面引入图片，而恰恰CSS里面解析不了“\”这个符号，所有lees们肯定会在开发的过程中遇到过这种情况，发现图片出不来。
第一二种情况：
咱们最常遇到的引入图片方式也就是src方式，这个方式是标签（img）引用的方式，此时可以不考虑数据库中转义字符的问题。
解决方法：
使用PHP特有的一个函数：str_replace（），用

			
		

	





	

		

			

				
					
通过url获取网页图片到本地

				
			

			

				

					Z1998hx0919的博客
				

				

					03-27
					
					1438
					
				

			

		

		

			
				
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
 
public class GetUrlPic...

			
		

	





	

		

			

				
					
webpack教程--08使用url-loader引入图片

				
			

			

				

					jiaojsun的博客
				

				

					10-16
					
					958
					
				

			

		

		

			
				
增强的file-loader:url-loader

将图片编码成另外的格式（base64）

如果图片比较小可以用这种方式，过大的话还是打包成图片

----------------------------------------------------------------------------------------------------------------------------...

			
		

	





	

		

			

				
					
TP5背景图，'url()'的引入方法

				
			

			

				

					lele_147的博客
				

				

					08-11
					
					1896
					
				

			

		

		

			
				
樂楽认为：
最让初学者头疼的一个小问题可能就是傻傻分不清楚转义字符吧。 -->就这玩意（\）。在WEB开发的过程中，樂楽也遇到了关于转义字符的一个小问题，我想给lees们分享一下我解决的方法。
一般咱们用TP5存储一张图片的路径是这样子的（如下）：

（这是樂楽数据库中的一条数据）
TP5引入图片的两种方式：
①二般情况（先说二般情况哈~）：
咱们有时候会遇到“url”引入图片的方式，此方法...

			
		

	





	

		

			

				
					
js获取图片路径传给php,ThinkPHP关于JS文件如何添加图片路径以及ajax的URL路径

				
			

			

				

					weixin_39710361的博客
				

				

					04-09
					
					207
					
				

			

		

		

			
				
关于JS文件如何添加图片路径以及ajax的URL路径——留恋风引语：大家在写模板的时候，经常会运用js/jquery,然后写一些跳转切换的特效，但是往往会发现整个模板页(.html)前面写了一大堆js/jq代码，个人感觉很不美观(纯属个人观点)，一般都把js代码抽出来放在另一个JS文件夹里，这就涉及到tp框架的跳转和URL链接问题，如何才能使__URL__、__APP__这些能在js文件里都有效果...

			
		

	





	

		

			

				
					
通过url直接访问项目图片

				
			

			

				

					哈
				

				

					05-18
					
					3475
					
				

			

		

		

			
				
在配置文件application.yml中配置相应路径：

spring:
  mvc:
    static-path-pattern: /**



将图片放入项目的/src/main/resources/static目录下，如下图：



在浏览器中通过url访问






			
		

	





	

		

			

				
					
【雪碧图】url放置图片路径

				
			

			

				

					m0_57517704的博客
				

				

					09-08
					
					310
					
				

			

		

		

			
				
雪碧图url（）

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值