首页 > 其他分享 >vue3 动态获取 img中的src地址

vue3 动态获取 img中的src地址

时间:2023-03-16 18:01:06浏览次数:48  
标签:src assets img 打包 vue3 vite

 

 

vite 官方默认的配置,如果资源文件在assets文件夹打包后会把图片名加上 hash值,但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析,导致开发环境可以正常引入,打包后却不能显示的问题。

vite官方文档的解释:
https://vitejs.bootcss.com/guide/assets.html

 

PS:除非在不 build 的情况下,可以使用以下的方法,否则这种方法就不要使用了。

<img :src="`/src/assets/home/${name}.png`" alt="" />

 

   

标签:src,assets,img,打包,vue3,vite
From: https://www.cnblogs.com/wjm956/p/17223678.html

相关文章

  • img标签如何添加动态src地址
    把图片当成模块用require引入图片地址(不带图片名称),后面加上循环遍历的图片名称拼接后就可以展示图片。即 require('@/assets/images/home/'+item.url)  // item.......
  • 宝塔部署history模式的vue3项目
    前置条件:服务器、域名、备案、项目首先进入宝塔点击左侧的网站,然后点击添加站点 填入域名,点击提交,宝塔会自动帮忙创建一个根目录到该根目录,把打包后的vue项目放......
  • 解决img中不能使用绝对
    报错原因如果页面在服务器上,浏览器出于安全考虑是不允许html访问本地文件的。解决方案1、设置映射2、相对路径3、读取本地文件,然后返回result4、通过localhost,本地端......
  • vue3+vite+vant文件上传
    1:文件上传下载1//上传文件2constafterRead=()=>{3for(letfileoffileList.value){4//1:加载状......
  • vue3仿windows弹窗
     一款基于vue3的仿windows弹窗。可以组件模板编写或函数式创建。地址:https://github.com/dnoyeb/box-win   安装npmadd'box-win'两种方式:1、组......
  • [Vue3] 组件上的ref不能与组件名相同
    情景关键组件没有正确引入函数无限递归解决如果在网上搜索[Vuewarn]:Componentismissingtemplateorrenderfunction.或[Vuewarn]:Invalidvnodetype......
  • 使用vscode + vite + vue3+ vant 搭建vue3脚手架
    【术栈】开发工具:VSCode代码管理:Git前端框架:Vue3构建工具:Vite路由:vue-router4x状态管理:vuex4xAJAX:axiosUI库:vant数据模拟:mockjscss预处理:sass构建vue3项目1,安装 vite......
  • less & saas/scss & css 深度选择器语法在 Vue2 & Vue3中的使用
    vue2中原生css>>>.el-card__header saas\scss::v-deep.el-card__headerless/deep/.el-card__header vue3中:deep(){......
  • vue3 + vite 分析报告 report == rollup-plugin-visualizer
    安装插件 npmirollup-plugin-visualizer-D 配置vite.config.js文件【加入插件】import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'......
  • vue3-vite-cesium
     cesium中文网http://cesium.xin/ 优秀的学习资源http://cesium.xin/wordpress/archives/130.html  vite-plugin-cesiumvite社区插件安装cesiumhttps://git......