vue3 + vite +ts 引入静态图片

原创 已于 2022-07-11 11:39:38 修改 · 2.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#大数据

于 2022-07-11 11:37:16 首次发布
本文探讨了在前端开发中遇到的模块导入问题，对比了require和import两种方式的使用场景。同时，重点分析了Vite的静态资源引入方式，以及如何解决可能出现的相对路径错误。通过控制台的提示，开发者可以更好地理解和解决这类问题。

直接用require x

调试报错
在这里插入图片描述

用 import

第一种 x

在这里插入图片描述
第二种 ✔

在这里插入图片描述

第三种 vite的静态资源引入

如果出现引入错误 请看控制台的提醒  相对地址

在这里插入图片描述
在这里插入图片描述

精选资源
vue3+vite+ts 仿淘宝放大镜效果
09-17
在本项目中，我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验，让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...
【Vue3+Ts】动态引入图片路径/require引入错误
cnsv的博客
02-06 1254
【Vue3+Ts】动态引入图片路径/require引入错误
Vue3 + Vite + ts引入本地图片
grootbaby
03-22 2060
Vue3 + Vite + ts引入本地图片 单张图片导入 多张图片导入 背景图片引入
在vue组件的ts脚本中导入图片
deping_chen的专栏
07-14 4705
原先我是这么导入图片的，可以看到我加了一些eslint-disable注释： // eslint-disable-next-line @typescript-eslint/no-var-requires const onLight = require("../imgs/light-on.png"); // eslint-disable-next-line @typescript-eslint/no-var-requires const offLight = require("../imgs/light-of
vue3+vite+ts 中引入图片
晓枫
12-08 882
vue3+vite+ts 中引入图片
Ts中引入图片，文字等资源时提示Cannot find module
updydydy的博客
11-15 763
解决了在ts项目中，引入图片资源，提示Cannot find module的错误
vue3 + vite + cesium教程
m0_70989202的博客
10-27 2280
/1.在cesium ion的官网中找到New York City 3D Buildings 并添加到自己的商店中。//2. 75343为该白膜数据的id。//添加官网提供的纽约的城市白膜数据。//换成自己申请的token。//创建一个地图的视图对象。//跳到白膜数据的位置。//等待数据加载完成。//添加到地图对象中。
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 3️⃣项目搭建及前期准备
不乱来的嫖客
03-05 2330
使用vite创建 vue3项目，项目搭建及前期准备
【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）
aDiaoYa_的博客
01-25 3926
结合了很多项目和文章，总结一篇项目构建的笔记。 温馨提示：文章末尾记录了我在搭建项目过程中，遇到的一些问题和解决办法 ~
从零搭建 Vue3 + VIte + Ts 项目 —— 并集成eslint 、prettier
2301_82244509的博客
07-05 1729
/ 新增// 对某些文件进行单独配置（这里针对 TypeScript 文件）files: [‘.ts’, 'rules: {‘no-undef’: ‘off’, // 在 TypeScript 中没有必要使用 no-undef 规则},},],// 自定义规则rules: {// 函数的复杂度是指函数中控制流程的复杂程度，例如条件语句、循环语句、嵌套等。复杂度越高，函数的可读性和可维护性可能越差。
vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式
热门推荐
我总是词不达意的博客
07-20 3万+
vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式
Vue3 - vite 引入本地图片方法，页面引入本地静态资源图像详细教程，解决 UI 前端组件库的图片属性无法使用本地图像问题（无论是本地开发还是打包部署，本地图片的路径正常可用）
🏆 前端领域优质创作者
09-08 1万+
vue3vite引入使用本地图片，vue3vite如何引入本地资源的图片图像，vite怎么把本地的图片赋值给src图片标签属性，vue3vite使用require引入本地图像报错，vue3vite组件库的组件怎么引入本地图片，vue3vite如何给组件库的图片属性链接本地资源的图像，elementplusantdesignvue组件怎么使用本地资源的静态图片，vue3vite版本引入本地静态图片的方式，vue3+vite引入本地图片，vue3如何加载本地图片等静态资源，引入
vue3+vite动态引入图片
jquerybootstrap的博客
03-06 909
解决vue3+vite动态引入图片，打包后找不到资源问题。
vue3 vite版本 引入本地静态图片的方式
阿里巴啦的博客
01-28 2万+
vue3引入本地静态图片
vue3 如何引入静态资源图片
weixin_45102212的博客
06-01 6268
vue3如何引入静态资源
Vue 3+vite 动态引入本地图片img
简单Cere
02-01 1408
Vue3动态换图，换壳思路
vue3 + vite引入本地图片
pscool的博客
06-24 7218
/ 打印的是： /src/assets/imgs/cover.png。
笔记：Vue3+Vite 怎么导入静态资源，比如图片/组件
最新发布
sky8880的博客
04-02 860
笔记：Vue3+Vite 怎么导入静态资源，导入图片 导入组件
vue3+vite 动态引入图片的方法
学而不思则罔
06-14 1790
import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL。
vue+kindeditor+图片上传
03-14
Vue是一种流行的JavaScript框架，用于构建用户界面。KindEditor是一个富文本编辑器，可以方便地在网页中编辑和展示富文本内容。图片上传是指将用户选择的图片文件上传到服务器。 在Vue中使用KindEditor进行图片上传的步骤如下： 1. 安装KindEditor：可以通过npm或者直接下载KindEditor的源代码进行安装。 2. 在Vue组件中引入KindEditor：可以通过import语句引入KindEditor的相关文件。 3. 在Vue组件中使用KindEditor：在需要使用富文本编辑器的地方，使用KindEditor提供的API进行初始化和配置。 4. 实现图片上传功能：通过配置KindEditor的图片上传接口，将用户选择的图片文件上传到服务器。 以下是一个简单的示例代码： ``` <template> <div> <textarea ref="editor"></textarea> <button @click="uploadImage">上传图片</button> </div> </template> <script> import KindEditor from &#39;kindeditor&#39; export default { mounted() { KindEditor.create(this.$refs.editor, { uploadJson: &#39;/uploadImage&#39;, // 图片上传接 allowFileManager: false // 是否允许文件管理 }) }, methods: { uploadImage() { // 获取编辑器中的图片文件 const images = KindEditor.editor(this.$refs.editor).images // 将图片文件上传到服务器 // ... } } } </script> ``` 相关问题: 1. Vue是什么？ 2. KindEditor是什么？ 3. 如何在Vue中使用KindEditor？ 4. 如何实现图片上传功能？ 5. 还有其他类似的富文本编辑器可以使用吗？
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值