vue3动态引入图片(:src)

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

实际上我们不希望资源文件被wbpack编译可以把图片放到public 目录会更省事,不管是开发环境还是生产环境,可以始终以根目录保持图片路径的一致,这点跟webpack是一致的

image.png

看到这里,也许问题就解决了,如果在vite确实需要将静态文件放在assets,我们再往下看:

这里我们先假设:

静态文件目录:src/assets/images/

我们的目标静态文件在 src/assets/images/home/home_icon.png

js 复制代码
  <img :src="require('@/assets/images/home/home_icon.png')" />

尝试过require动态引入, 发现报错:require is not defind,这是因为 require 是属于 Webpack 的方法

第一种方式(适用于处理单个链接的资源文件)

js 复制代码
  import homeIcon from '@/assets/images/home/home_icon.png'
	<img :src="homeIcon" />

第二种方式(适用于处理多个链接的资源文件)

推荐,这种方式传入的变量可以动态传入文件路径!!

静态资源处理 | Vite 官方中文文档

new URL() + import.meta.url

这里我们假设:

工具文件目录: src/util/pub-use.ts

pub-use.ts

js 复制代码
// 获取assets静态资源
export default  const getAssetsFile = (url: string) => {
   return new URL(`../assets/images/${url}`, import.meta.url).href
}

使用

js 复制代码
import usePub from '@/util/public-use'
setup () {
  const Pub = usePub()
  const getAssetsFile = Pub.getAssetsFile
  return { getAssetsFile }
}

可以包含文件路径

js 复制代码
<img :src="getAssetsFile('/home/home_icon.png')" />
相关推荐
a cool fish(无名)7 分钟前
rust-模块树中引用项的路径
java·前端·rust
前端进阶者17 分钟前
天地图Marker跳一跳动画
前端
火柴就是我21 分钟前
每日见闻之Three.js 根据官方demo 理解相机位置
前端
JosieBook30 分钟前
【web应用】基于Vue3和Spring Boot的课程管理前后端数据交互过程
前端·spring boot·交互
刘大猫.37 分钟前
npm ERR! cb() never called!
前端·npm·node.js·npm install·npmm err·never called
咔咔一顿操作41 分钟前
常见问题三
前端·javascript·vue.js·前端框架
前端程序媛Ying42 分钟前
点击按钮滚动到底功能vue的v-on:scroll运用
javascript
上单带刀不带妹42 分钟前
Web Worker:解锁浏览器多线程,提升前端性能与体验
前端·js·web worke
电商API大数据接口开发Cris1 小时前
Node.js + TypeScript 开发健壮的淘宝商品 API SDK
前端·数据挖掘·api
还要啥名字1 小时前
基于elpis下 DSL有感
前端