首页 > 其他分享 >vue3+vite | assets动态引入图片的几种方式,解决打包后图片路径错误不显示的问题

vue3+vite | assets动态引入图片的几种方式,解决打包后图片路径错误不显示的问题

时间:2023-02-20 00:12:41浏览次数:61  
标签:assets url 路径 打包 vue3 images vite 图片

问题

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

这里我们先看看vite官方文档的解释:
https://vitejs.bootcss.com/guide/assets.html

把图片放到public目录会更省事,不管是开发环境还是生产环境,可以始终以根目录保持图片路径的一致,这点跟webpack是一致的

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

示例

静态文件目录:src/assets/images/
目标静态文件在 src/assets/images/home/home_icon.png

<img :src="require('@/assets/images/home/home_icon.png')" />

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

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

import homeIcon from '@/assets/images/home/home_icon.png'

<img :src="homeIcon" />

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

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

静态资源处理 | Vite 官方中文文档
new URL() + import.meta.url

示例
工具文件目录: src/util/pub-use.js
pub-use.js

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

使用

import {getAssetsFile} from '@/util/public-use'

// 可以包含文件路径
<img :src="getAssetsFile('/home/home_icon.png')" />

补充:如果是背景图片引入的方式(一定要使用相对路径)

.imgText {
  background-image: url('../../assets/images/1462466500644.jpg');
}

生产环境会自动加上hash,并且路径正确,

使用绝对路径在开发环境能够正常显示,但将导致打包后的路径不正确.

转载文章
https://www.jianshu.com/p/d71ad062653e

标签:assets,url,路径,打包,vue3,images,vite,图片
From: https://www.cnblogs.com/echohye/p/17135990.html

相关文章

  • Matalb如何批量存储图片
    Codeclc;closeall;clearall;[file,path]=uigetfile({'*.jpg';'*.png'},'selpic');%注意“;”多种格式时使用{'.xxx';'*.xxx'}init_pic=imread([path,file])......
  • pycharm中matplotlib 画图后图片卡住问题的解决
    目录问题解决方案本质理解问题以前使用pycharmpythonmatplotlib画图的时候,可以画好多可以交互的图,像matlab一样,但从某一时刻开始,pycharm设置改了哪里,只要使用matplotl......
  • vue3-router使用
     1.引入routernpminstallvue-router@4 2.创建文件夹router,并创建index.js文件import{createRouter,createWebHashHistory}from"vue-router"constrouter=cr......
  • 1 [初识]Vue3教程简介与Hello World编写 原创
    阅读目录​​前置知识​​​​下载VSCode​​​​编写第一个HelloWorld​​​​直接引入Vue3.x源码​​前置知识但是你还是需要会下面最基本的知识:1、HTML:超文本标记语......
  • Java:使用thumbnailator实现图片压缩处理
    thumbnailator可以实现图片的压缩、旋转、添加水印文档https://github.com/coobird/thumbnailatorhttps://github.com/coobird/thumbnailator/wiki/Examples依赖<!--......
  • 上传图片 即时显示
    jsp页面中:上传预览图片:<br><inputtype="file"/><br/><divstyle="overflow:hidden;"><divid="imgDiv">......
  • js下载远程图片
    a标签的download属性无法下载远程图片可以将图片转换成blob然后下载如<ahref="https://xxxx.xxx/xxxx.png"download="xxx.png">下载</a>转换blob下载/***blob......
  • vue3 安装教程
    安装教程:https://www.runoob.com/vue2/vue-install.htmlhttps://cn.vuejs.org/guide/introduction.html 修改npm下载镜像的命令:  vue3启动应用:npminitvue@la......
  • vue3之前实现数据双向绑定的原理
    index.html<!DOCTYPEhtml><htmllang="en"><body><divid="app"><span>打工人:{{name}}</span><inputtype="text"v-model="name"/>......
  • vue3快速上手
    Vue3快速上手1.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:OnePiece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://gi......