vite+vue3打包后图片不显示,封装图片引入方式

vite+vue3打包后图片不显示,封装图片引入方式

在webpack工程,可以直接使用require引入图片,但是vite是无法直接使用require的,webpack能支持require是因为对它进行了处理。我们可以使用import,不过如果图片过多,对比require方式则略为繁琐和不便。

如下这种方式既不能支持变量,代码也必须置于js开始处。

import tabBarIcon1 from '~/images/icon/icon-calendar.svg'
import tabBarActiveIcon1 from '~/images/icon/icon-calendar-active.svg'
import tabBarIcon2 from '~/images/icon/icon-pending.svg'
import tabBarActiveIcon2 from '~/images/icon/icon-pending-active.svg'
import tabBarIcon3 from '~/images/icon/icon-column.svg'
import tabBarActiveIcon3 from '~/images/icon/icon-column-active.svg'

有没有更好的方案引入图片呢?不妨试试new URL()。使用方式可参考vite官方文档-静态资源处理

下面演示img标签src引入以及背景方式引入。为了使用更方便,建议封装成公共函数,统一调用。
注意:需要把图片资源放在public目录管理。否则会出现本地开发能显示图片,打包后因为路径处理问题无法显示图片。

|-- public                          静态资源文件夹,不经过vite处理
|    |-- images                     图片资源
|-- src                             源代码
|    |-- api                        后端api存放目录
|    |-- ...                        其他
|-- package.json                    项目依赖描述文件
|-- vite.config                     项目配置文件
|-- ...                             其他
<template>
  <h1 align="center">图片引入演示</h1>
  <!-- 正确姿势 -->
  <img height="100" :src="requireImg('icon/icon-offline.svg')" alt="" srcset="">
  <!-- 图片无法正常显示,路径不对 -->
  <img height="100" :src="requireImg2('icon/icon-offline.svg')" alt="" srcset="">
  <!-- 正确姿势 -->
  <div class="test-bg">test-bg1</div>
  <!-- 图片无法正常显示,路径不对 -->
  <div style="height: 100px;background: url('/images/icon/icon-offline.svg')">test-bg2</div>
</template>


<script setup lang="ts">
const PROJECT_DIR = '/acsmobile'
/**
 * 获取图片
 * @param imgUrl 
 * @returns 
 */
function requireImg(imgUrl: string) {
  return new URL(PROJECT_DIR + '/images/' + imgUrl, import.meta.url).href
}
function requireImg2(imgUrl: string) {
  return new URL('/images/' + imgUrl, import.meta.url).href
}


</script>


<style lang="less" scoped>  .test-bg {
    height: 100px;
    background: url('/images/icon/icon-offline.svg')
  }
</style>

请注意两点:

1、如果打包后的源码不是直接部署在根服务器下,而是在某个目录下,则应该加上部署目录,部署目录可以通过常量定义,也可以通过匹配location.pathname的方式获取;

2、行内样式引入背景图片不能直接通过 / 根路径访问到 而通过class引入则可以。

最后,因为public目录的资源是不会被打包的,因此图片不会携带hash值,所以如果更换了图片,那么图片路径加上随机参数,即可解决旧图片缓存问题。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注