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

相关推荐
uhakadotcom18 分钟前
入门教程:如何编写一个chrome浏览器插件(以jobleap.cn收藏夹为例)
前端·javascript·面试
捡芝麻丢西瓜21 分钟前
SPM 之 混编(OC、Swift)项目保姆级教程(Swift Package Manager)
前端
我是天龙_绍21 分钟前
cdn是个啥?
前端
南雨北斗22 分钟前
VSCode三个TS扩展工具介绍
前端
若无_24 分钟前
了解 .husky:前端项目中的 Git Hooks 工具
前端·git
ze_juejin26 分钟前
前端发送语音方式总结
前端
给月亮点灯|31 分钟前
Vue3基础知识-Hook实现逻辑复用、代码解耦
前端·javascript·vue.js
Simon_He33 分钟前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown
顽强d石头38 分钟前
v-model与.aync的区别
前端·javascript·vue.js
Hilaku40 分钟前
我为什么认为 CSS-in-JS 是一个失败的技术?
前端·css·前端框架