记一次Flask中JS引用图片的坑

课设写完后准备挂到网上，正好以前写过Flask的项目，所以直接把课设文件拖到项目的static和templates文件夹里了。
刚开始万事大吉，因为JS里没有引用图片，后来JS里加了个在canvas上绘图的功能，引用图片就报404了。调了半天无果，怒删项目里课设相关的文件，新开个Flask项目测试。

正文

先来看项目结构:

  run.py
│
└─app
    │  routes.py
    │  __init__.py
    │
    ├─static
    │  └─js
    │          main.js
    │          udk.jpg
    │
    ├─templates
    │      index.html

run.py用来启动程序，app文件夹内保存项目代码，其中js文件夹下有一张图片。现在的需求是用main.js在canvas上把udk.jpg绘制出来。
如果直接这样写

let img = new Image();
img.src = './udk.jpg';
img.onload = function(){
	cvs = document.querySelector('#paint').getContext('2d');
	cvs.drawImage(this, 0, 0, 300, 300);
}

是会报404的，消息短语:"GET /udk.jpg HTTP/1.1" 404 -
从这里可以看到GET方法拿的不是static/js/udk.jpg，而是直接从\下找文件，自然会404。
解决方法
很简单，前面说过“GET方法拿的不是static/js/udk.jpg”，那么我们这里把JS代码改为

let img = new Image();
img.src = 'static/js/udk.jpg';
// ...

即可。

总结

由于路径没有写全踩了一次坑 （并水了一篇博客）。
记得一定要把路径写全哦。

补充

刚刚又调了半天，觉得上午的内容没有讲的很清楚，故添加补充

还是拿上面的目录结构举例

 run.py
│
└─app
    │  routes.py
    │  __init__.py
    │
    ├─static
    │  └─js
    │          main.js
    │          udk.jpg	
    │
    ├─templates
    │      index.html

现在假设JS目录下又新增了一个JS文件夹，新的目录结构为

  run.py
│
└─app
    │  routes.py
    │  __init__.py
    │
    ├─static
    │  └─js
    │      │  main.js
    │      │  udk.jpg
    │      │
    │      └─js
    │              new.js
    │              udk.jpg
    │
    ├─templates
    │      index.html

现在想用new.js引用同目录下的udk.jpg，该怎么做？

解决方法
找到new.js的父目录JS，再找到JS的父目录static的子目录JS文件夹，以此类推，直到找到static文件夹，然后回溯即可以得到引用路径：static/js/js/udk.jpg。

不知道是不是最好的解决方法，但能用。