vite中引入图片的几种方式 |
您所在的位置:网站首页 › 图片路径不正确 › vite中引入图片的几种方式 |
一,将图片资源放入public目录下
let myIcon = new BMap.Icon("/map_pin_red.png", new BMap.Size(21, 30)); 我们看到实际上我们不希望资源文件被vite编译可以把图片放到public 目录会更省事,不管是开发环境还是生产环境,可以始终以根目录保持图片路径的一致。 public 目录# 如果你有下列这些资源: 不会被源码引用(例如 robots.txt) 必须保持原有文件名(没有经过 hash) ...或者你压根不想引入该资源,只是想得到其 URL。 那么你可以将该资源放在指定的 public 目录中,它应位于你的项目根目录。该目录中的资源在开发时能直接通过 / 根路径访问到,并且打包时会被完整复制到目标目录的根目录下。 目录默认是 /public,但可以通过 publicDir 选项 来配置。 请注意: 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子,public/icon.png 应该在源码中被引用为 /icon.png。 public 中的资源不应该被 JavaScript 文件引用。 vite对官方public目录介绍 public目录 二,是将图片放入assets目录下错误引入方式:使用了@符合解析路径,发现根本解析不了。生产环境,开发环境统统无效。 let mapPicSrc = new URL(`@/assets/img/mapImg/map_pin_${item.icon}.png`, importa.url).href; myIcon = new BMap.Icon(mapPicSrc, new BMap.Size(21, 30));访问路径如下:404
第一种方式:正确使用方式:(但是这种方式适用于单个链接的资源文件) import mapImg from '@/assets/img/mapImg/map_pin_red.png' let myIcon = new BMap.Icon(mapImg, new BMap.Size(21, 30)); console.log(mapImg) 开发环境下结果为: /src/assets/img/mapImg/map_pin_red.png 浏览器访问的地址为:http://localhost:8081/src/assets/img/mapImg/map_pin_red.png 生产环境下:经过vite打包,我发现小的图片解析为base64第二种方式(适用于处理多个链接的资源文件) 推荐,这种方式传入的变量可以动态传入文件路径!! new URL() + importa.urlimporta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用。 在一个 JavaScript 模块中,通过相对路径我们就能得到一个被完整解析的静态资源 URL:(相对路径一定要写正确,当前引入图片的文件,相对图片的位置) let mapPicSrc = new URL(`../../../assets/img/mapImg/map_pin_${item.icon}.png`, importa.url).href;开发环境下,解析得到的路径为: //解析得到的路径为: http://localhost:8081/src/assets/img/mapImg/map_pin_purl.png生产环境下:经过vite打包,我发现小的图片解析为base64 补充:如果是背景图片引入的方式(一定要使用相对路径) .imgText { background-image: url('../../assets/images/1462466500644.jpg'); }生产环境会自动加上hash,并且路径正确。 以下错误用法,使用绝对路径在开发环境能够正常显示,但将导致打包后的路径不正确 .imgText { background-image: url('src/assets/images/1462466500644.jpg'); } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |