【Vue3】访问图片资源的不同形式

背景

最近在做一个前后端分离的项目，在访问图片资源的时候因为url格式的问题卡住了许久，有必要记录一下

向vue3项目的运行端口请求

如果资源写在后端端口，可以直接写字符串格式访问：

    getPosterUrl(posterName) {
      return "@/assets/img/movie_posts/"+posterName;
    },

请求的时候控制台就会这样显示：

其中localhost:8080是运行vue项目的时候跑起来的默认端口。

向本地请求资源

但是在实际的项目开发里面，对本地资源的请求多于对运行端口的资源请求。

因此我们可以这样写：

getPosterUrl(posterName) {
      return require(`@/assets/img/movie_posts/${posterName}`);
    },

• 路径使用“`”（也就是键盘左上角esc下面的那个符号）括起来
• 涉及参数的使用“${}”包裹住

其他注意事项

1. 不管那种请求方式，都不要漏掉图片背后的,jpg后缀名
2. 假如调用外部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');