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

背景

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

向vue3项目的运行端口请求

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

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

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

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

向本地请求资源

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

因此我们可以这样写：

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

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

其他注意事项

不管那种请求方式，都不要漏掉图片背后的,jpg后缀名！