Vue 获取 public图片

一、Vue静态资源文件夹

Vue 有两个存放静态资源的文件夹:assets和public。

1、 assets文件夹

使用require()方法加载静态资源,如:

javascript 复制代码
require('./assets/image/success.png')

1、这里的文件经过webpack处理过的,require方法的参数不支持变量,只能存文件的路径,因此加载图片时不能动态获取。

2、public文件夹(以前vue1.0版本叫static)

public文件夹的文件是不经过webpack处理,打包时直接把public下的文件复制到打包后的dist的目录下的。一般需要动态获取文件,或者文件很多时使用。

public的文件直接使用process.env.BASE_URL + public下文件的目录路径,如:

javascript 复制代码
data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

<img :src="`${publicPath}success.png`">

3、官网assets和public文件介绍

https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-文件夹

这是转载的文章:

转载的文章:https://blog.csdn.net/u013116210/article/details/118639146

相关推荐
玲小珑15 分钟前
Next.js 教程系列(十六)Next.js 中的状态管理方案
前端·next.js
前端小巷子17 分钟前
web实现文件的断点续传
前端·javascript·面试
小磊哥er18 分钟前
【前端工程化】前端项目怎么做代码管理才好?
前端
jojo是只猫1 小时前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机5 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程9 小时前
2025前端面试题
前端·面试
前端小趴菜0510 小时前
React - createPortal
前端·vue.js·react.js
晓131311 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo11 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript