vite+vue3图片引入方式不生效解决方案

最新推荐文章于 2024-07-30 22:59:19 发布
最新推荐文章于 2024-07-30 22:59:19 发布
阅读量491 收藏 8
点赞数 10
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47000834/article/details/136319862
版权
本文讲述了在使用Vite构建的Vue3项目中，通过`newURL`方法导入图片资源失效的问题，提供了一种将引入方式修改为`import.meta.url`的解决方案，以确保图片加载正常。
摘要由CSDN通过智能技术生成

vite+vue3图片引入方式不生效解决方案

引入方式改成

const wordImg=new URL('/src/assets/MicsosoftWord.png',import.meta.url).href;

原理

在这里插入图片描述

Shero.李建业
关注
Vite + Vue3 实现前端项目工程化
前端知识分享喵
05-10 882
Vue3 发布至今，周边的生态、技术方案已足够成熟，个人认为新项目是时候切换到 Vite + Vue3 了。今天就给大家操作一下这种技术方案实现前端工程化。
Vue3 + Vite+ Element-Plus + TypeScript 搭建系统
weixin_45044818的博客
12-04 1371
一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。创建 variables.scss 变量文件，注意规范变量以 $ 开头 @styles/variables.scss。上面导出的scss全局变量在ts不生效的，需要创建一个以.module.scss 结尾的文件。添加scss @styles/normalize.scss。vite导入variables.scss。
vue3 引入图片报错 Uncaught (in promise) ReferenceError: require is not defined
Hermia_yuan的博客
08-04 2117
如果我们使用 require 来引入一个图片文件的话，那么 require 返回的就是用于引入的图片（npm 运行之后图片的编译路径）。vue 项目通过 webpack 的 devServer 运行之后，默认的 vue-cli 配置下，图片会被打包成 name.hash 的图片名，在这种情况下，如果我们使用固定的字符串路径则无法找到该图片，所以需要使用 require 方法来返回图片的编译路径。是一个 ESM 的原生功能，会暴露当前模块的 URL。如果项目是用vite搭建的,就需要使用。
vue3动态引用本地图片不生效甚是报404
weixin_49066399的博客
09-21 1118
vue3动态引用本地图片不显示控制台报404
vue3+vite5中require引入图片失效，解决方法new URL
最新发布
yavlgloss的博客
07-30 275
vue3+vite5中require引入图片失效，解决方法new URL
[vue3 配置] import 图片无法识别的问题.md
wqm71的博客
03-18 545
Cannot find module '@/assets/column.jpg' or its corresponding type declarations.为啥报这个错误？typescript无法识别图片文件,需要在配置中增加声明。在tsconfig.json增加图片配置。vue3引入图片,路径没错，但无法识别。新建image.d.ts文件。
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
FellAsleep的博客
05-31 8022
因为vite构建的vue3项目，无法使用require导入图片，需要处理。1.新建 utils/require.js 文件。
electron+vite+vue3+sqlite3基础框架
12-14
Vue3引入了Composition API，这是一种更模块化的方式来组织组件逻辑，比之前的Option API更易于理解和维护。同时，Vue3还支持 teleport 和Suspense等新特性，增强了开发者在复杂场景下的处理能力。 `Vite`是由Vue....
从0到1，带你搭建Vite+Vue3+Pinia+Naive UI后台（二） - 配置篇（上）
xxxzzzqqq_的博客
03-17 464
没有前言，接上一篇直接开始编写不易，还请各位赏个star。
Vite 3.x + Vue 3.x + TypeScript 4.x + Element Plus + Pinia 搭建项目
lhz_333的博客
08-17 1617
学习如逆水行舟，不进则退。
解决Vue设置图片的动态src不生效的问题
weixin_47382783的博客
09-25 2040
在vue项目中，想要动态设置img的src时，此时发现图片会加载失败。在Vue代码中是这样写的：在Vue的data中是这样写的：我的图片在根目录下的static里面：但是在页面上这个图片却无法加载出来。
vue3 + vite动态引入图片以及本地正常展示，线上部署不正常显示的解决方法
lth002的博客
09-21 1834
【代码】vue3 + vite动态引入图片以及本地正常展示，线上部署不正常显示的解决方法。
vue3+ts 无法引入图片问题
在座的都是大神
07-04 807
vue3+ts 无法引入图片问题
无法导入本地得图片（Vue中轮播图片）
Mmj_mmj的博客
05-06 488
无法导入本地得图片（Vue中轮播图片）
vue3引入图片 无法使用require， vue3+vite构建项目使用require引入包出现问题需要用newURL来动态引入图片等静态资源
weixin_42216520的博客
04-23 1731
vue3引入图片 无法使用require， vue3+vite构建项目使用require引入包出现问题需要用newURL来动态引入图片等静态资源
Vue3+TS+Vite无法使用require导入图片的解决方法
小火车况且况且况且的博客
11-09 2376
Vue3+TS+Vite无法使用require导入图片的解决方法
Vue3+Vite项目中遍历图片url无法正常显示问题
tingmua的博客
04-07 511
一般来说都使用require来引入图片url就可以解决，但是require是webpack的方法，在Vite项目中使用就会报错。一般在vue项目中，使用v-for遍历图片的url，并使用v-bind循环绑定src，并不能正常显示图片。在Vite项目中，可以使用官方给出的new URL方法来引入图片路径。
vue3使用import.meta.url打包后运行报错
yang25_的博客
08-22 3154
assets/img.png图片路径是当前项目目录及图片名称，vite会转换，不用考虑打包后目录。报错原因：import.meta.url未被vite解析替换。
Vite+Vue3+Gin全栈开发平台功能集成指南
资源摘要信息:"vite+vue3+gin搭建的开发基础平台.zip" 1. Vite技术栈介绍 Vite是一个由Vue.js核心团队打造的现代化的前端构建工具，具有快速、轻量的特点。它利用浏览器原生的ESM（ECMAScript Modules）能力，提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Shero.李建业

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值