vite引入图片用法

已于 2024-01-29 15:27:46 修改
阅读量296 收藏
点赞数 2
分类专栏： 经验记载 文章标签： 前端
于 2024-01-29 15:27:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/notagoodwriter/article/details/135913370
版权

在 vite 中 引入图片方式跟其他脚手架创建项目的引入方式不一样

要使用 import.meta.url  他是一个 ESM 的原生功能

const mapPicSrc = ref(new URL(`@/assets/charts/bdf.png`, import.meta.url).href)

如果使用 require 引入会报错

说没有 require 模块

关忆北_
关注
专栏目录
Vue3 - vite 引入本地图片方法，页面引入本地静态资源图像详细教程，解决 UI 前端组件库的图片属性无法使用本地图像问题（无论是本地开发还是打包部署，本地图片的路径正常可用）
王佳斌
09-08 9052
vue3 vite引入使用本地图片，vue3 vite如何引入本地资源的图片图像，vite 怎么把本地的图片赋值给src图片标签属性，vue3 vite 使用require引入本地图像报错，vue3 vite组件库的组件怎么引入本地图片，vue3 vite 如何给组件库的图片属性链接本地资源的图像，element plus ant design vue 组件怎么使用本地资源的静态图片，vue3 vite版本 引入本地静态图片的方式，vue3 + vite引入本地图片，vue3如何加载本地图片等静态资源，引入
Vue3 + Vite 动态引入图片
qq_43806604的博客
11-01 8628
Vue3 + Vite 动态引入图片 开发vue3 + vite项目的时候 想要动态的去引入图片来显示，尝试过require 发现报错 require is not defind 查看vite官方网站 官方说明 import imgUrl from './img.png' document.getElementById('hero-img').src = imgUrl 行为类似于 Webpack 的 file-loader。区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可
vite中引入图片的几种方式
blue_121的博客
05-19 1万+
该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。请注意： 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：（相对路径一定要写正确，当前引入图片的文件，相对图片的位置）生产环境，开发环境统统无效。目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致。
vite+vue3 import批量导入图片
最新发布
qq_25111883的博客
08-30 215
vite+vue3 import批量导入图片主要使用 “
vite动态导入图片
weixin_44368048的博客
09-30 3211
vite踩坑！无法使用require引入图片
Vite静态资源处理——动态引入图片
z止于至善的博客
03-16 3949
URL导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可以使用相对路径。
vue3 + vite引入本地图片
pscool的博客
06-24 6119
/ 打印的是： /src/assets/imgs/cover.png。
Vue 3使用vite 2.0 动态引入加载图片 src，解决方法超级简单
m0_67390379的博客
03-03 3463
我现在需要动态引入图片，因此要用到模板字符串和动态绑定。第一反应，当然就是如下写法： <img :src="`../assets/blogPhotos/${name}.jpg`" alt="" /> 但此时，控制台就报了一个错，说没有找到这张图片。 但我图片明明就放在那儿，你还说没找到。 这时一顿百度，没有找到结果。只能去vite的官网，没想到竟然被我找到解决方法了。 解决方法一 根据官网的提示，我找到了最简单的方法，就是在将asset 前面加上src。 <img v-if="post
如何使用vite-svg-loader
02-23
"使用 Vite-SVG-Loader 实现 SVG 图像的轻量级引入" 在现代 Web 开发中，使用 SVG 图像已经成为一个非常常见的需求，特别是在 Vue 应用程序中。然而，引入 SVG 图像经常会遇到一些问题，例如图像大小问题、浏览器...
React导入图片路径的方式(含vite导入方式)
Oooopkz的博客
03-13 807
【代码】React导入图片路径的方式(含vite导入方式)
vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式
我总是词不达意的博客
07-20 3万+
vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式
在vue3+vite项目中引入assets中图片到页面中的几种方式
weixin_47389477的博客
04-12 1941
vue3+vite
Vite -静态资源处理 - 普通的图片
northcastle的博客
11-17 419
vite 对 静态图片的使用案例
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
热门推荐
LoveSummer
07-21 7万+
vite官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上hash值，但是直接通过src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题我们看到实际上我们不希望资源文件被wbpack编译，这点跟webpack是一致的我们的目标静态文件在。......
vue3中vite 加载本地图片或动态加载图片
qq_39016177的博客
08-02 858
vue3中vite 加载本地图片或动态加载图片
关于vue项目中一种比较特别的本地图片的引入办法
LIJIANGNIHAO123的博客
05-03 451
前言：因本人有打造一个低代码平台，有时候开发是通过低代码平台开发，也就造成一个问题：有时候开发一个页面需要引入一些图片做背景之类的，而图片存在于本地代码的静态资源文件夹；直接通过路径是无法在低代码页面访问到对应图片（除非存储图片的文件夹不在webpack编译打包范围），几番思寻下，终于找到一个可以在外面访问本地静态资源的办法。3.定义了该方法在低代码可以调用，所以只需要低代码开发时，通过一下方法即可实现引入本地图片，即使本地代码经过编译打包也依旧可以正常访问到。
Vue3里如何使用ref以及require动态引入图片
Oliver尹的博客
10-07 5994
问题： Vue3里的setup中如何使用ref以及require动态引入图片 描述： 在Vue3项目中可以有一个背景图，背景图展示的值是由后台给予的，那么如何直接定义一个变量，然后控制变量的值进行require导入，而且在直接require的全路径的时候会报错 解决： 直接require一个变量会报错，目前也没有找到解决方案，当时可以require一个字符串+变量进行替代 //使用 setup() { async function init(): Promise<void> {
vite中动态加载图片路径
weixin_45837076的博客
01-03 1022
在vue项目中，构建工具使用webpack，想要动态加载图片路径，只要用require()即可，但是如果工具是基于vite的话，vite是直接根据ES Modules的，它是没有require的，那怎么办呢？
vite引入本地图片方法笔记
小小博客
11-20 227
【代码】vite引入本地图片方法笔记。
vue3+vite4 如何动态使用本地图片
04-01
如果需要在函数或条件语句中引入图片，可以使用`import()`函数动态加载模块，再使用`default`属性获取模块的默认导出。 ```vue export default { data() { return { image: null } }, mounted() { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值