背景
最近在做一个前后端分离的项目,在访问图片资源的时候因为url格式的问题卡住了许久,有必要记录一下
向vue3项目的运行端口请求
如果资源写在后端端口,可以直接写字符串格式访问:
getPosterUrl(posterName) {
return "@/assets/img/movie_posts/"+posterName;
},
请求的时候控制台就会这样显示:
其中localhost:8080是运行vue项目的时候跑起来的默认端口。
向本地请求资源
但是在实际的项目开发里面,对本地资源的请求多于对运行端口的资源请求。
因此我们可以这样写:
getPosterUrl(posterName) {
return require(`@/assets/img/movie_posts/${posterName}`);
},
- 路径使用“`”(也就是键盘左上角esc下面的那个符号)括起来
- 涉及参数的使用“${}”包裹住
其他注意事项
- 不管那种请求方式,都不要漏掉图片背后的,jpg后缀名
- 假如调用外部css文件访问图片,则不需要用require,也不能用@来代表src以请求视频文件,直接用相对路径请求即可——
background-image: url("../overlay.png"), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(3, 2, 2, 0.1)), url('../background.png');