图片和网页放在同一个文件夹里
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function a1() { var c=document.getElementById("test"); var b= c.getContext("2d"); var img=new Image(); img.src="1.png"; b.drawImage(img,0,0); } </script> </head> <body onload="a1()"> <canvas id="test" height="1200px" width="1200px" style="border: solid 1px #ff0000;"></canvas> </body> </html>
最好是用相对路径
如上图
一个项目叫测试
在测试文件夹中建一个img文件夹 把需要用到的图片放在img中
假如1.html文件要调用图片
<img src="img/1.jpg">
canvas使用也一样
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var v_canvas=document.getElementById("canvas"); var context=v_canvas.getContext("2d"); var img2=new Image(); img2.src="img/1.jpg"; img2.onload=function(){ context.drawImage(img2,0,0); }; } </script> </head> <body> <canvas width="500" height="500" style="border: solid 1px #ff0000;" id="canvas"></canvas> </body> </html>
我现在把图片放到和网页同一个文件夹了,还是没有用T_T
@很小的菜鸟: 不能吧?程序运行报错吗?
@默然沉醉: 不报错,我在js的function里面最后加了alert(0),也能显示,这个方法说明也走通了,就是没显示图片
@很小的菜鸟: 如果你直接<img src="img/1.jpg">引用图片能出来吗?
如果可以出来,那你再运行我的canvas代码应该也可以出来
@默然沉醉: 你的可以出来^O^ 虽然不知道我的为什么出不来
@很小的菜鸟: 那你好好对比一下吧,看看哪里不一样
@默然沉醉: 你写的是img2.onload=function(){ context.drawImage(img2,0,0); };我是直接写b.drawImage(img,0,0);,这样有什么区别吗
@很小的菜鸟: 是同步执行绘制图像的函数,可以实现一边加载,一边绘制
但是你去掉也好使,
@默然沉醉: 问题找到了,不是路径的问题。而是你写的img2.onload=function(){ context.drawImage(img2,0,0); };我是直接写b.drawImage(img,0,0);,直接写的话不出图像。。。
使用相对路径
相对路径指的是什么呢,这张图片是D盘的qqq.jpg
@很小的菜鸟: https://www.baidu.com/s?wd=html%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84&rsp=5&f=1&oq=%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84&tn=monline_3_dg&ie=utf-8&rsv_idx=2&rsv_pq=da85d42a00112f03&rsv_t=6623iNemEWU54Q%2F7R1xglFD5G8VAntTpS1dZxHzg97AhYPJRn3dv9hWIgJstdDsSnb7%2B&rsv_ers=xn0&rs_src=0
@羽商宫: 嗯,谢谢你,我试过了,还是不显示
相对路径:你当前的html文件的路径为根目录,开始寻找路径。
如果当前的html在C:/user/one/desktop/demo/ 下面
desktop就是桌面的意思。
C:/user/one/desktop/demo/ 目录下面还有:
img/
|----1.jpg
|----2.jpg
引用的时候这样写绝对路径
<img src="img/1.jpg">
实际后台已经做了处理:当前的html路径+"img/1.jpg" = “C:/user/one/desktop/demo/img/1.jpg”
如果换成域名或者IP,都是同样的道理。
域名:www.myyuming.com/img/1.jpg
IP:192.168.11.12/img/1.jpg
所以开发过程中,把使用到的资源,放在一起,使用相对路径。发布的时候,也很方便。
我现在把图片放到和网页同一个文件夹了,还是没有用T_T