Vue3+TypeScript+Vite怎么使用require动态引入图片等静态资源

最新推荐文章于 2025-03-24 15:01:43 发布

even_know

最新推荐文章于 2025-03-24 15:01:43 发布

阅读量436

点赞数 3

文章标签：前端 javascript 开发语言 vue.js

本文链接：https://blog.youkuaiyun.com/m0_71349739/article/details/139409730

版权

const getMakeTitleImg = (name: string) => {
  return new URL(`../../../assets/images/make-title/${name}.png`, import.meta.url).href;
};

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

even_know

关注关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue3 - vite 引入本地图片方法，页面引入本地静态资源图像详细教程，解决 UI 前端组件库的图片属性无法使用本地图像问题（无论是本地开发还是打包部署，本地图片的路径正常可用）

王二红

09-08

1万+

vue3vite引入使用本地图片，vue3vite如何引入本地资源的图片图像，vite怎么把本地的图片赋值给src图片标签属性，vue3vite使用require引入本地图像报错，vue3vite组件库的组件怎么引入本地图片，vue3vite如何给组件库的图片属性链接本地资源的图像，elementplusantdesignvue组件怎么使用本地资源的静态图片，vue3vite版本引入本地静态图片的方式，vue3+vite引入本地图片，vue3如何加载本地图片等静态资源，引入

搭建vite + vue3 + typescript

lemon_javascript的博客

05-01

1933

搭建vite + vue3 + typescript

参与评论您还未登录，请先登录后发表或查看评论

vue3中使用require导入图片

juanjuan_159的博客

12-21

3704

构建的vue3项目，无法使用require导入图片，需要处理。2.导入到当前页或注册为全局方法使用。1、定义一个require方法。

Vue3+vite项目使用require 解决 ReferenceError: require is not defined 报错问题

最新发布

蓝胖子的博客

03-24

2228

Vue3+vite项目使用require 解决 ReferenceError: require is not defined 报错问题

在vue3+vite中使用require

weixin_42348009的博客

11-21

4235

【代码】在vue3+vite中使用require。

如何在vue3+vite+ts中使用require

一个韩韩韩

04-13

1万+

vue3+vite+ts中不能使用require <img :src="getAssetsImages(children.icon.type)" alt="" style="width: 35px;height: 35px;"> 1、vue2中可以给图动态设置src属性 const getAssetsImages = (name) => { return require(/src/common/images/menu/${name}.png) } 2、vue3+vite+ts使用requ

Vue3+vite+TypeScript+Vant项目搭建

VnOcean的博客

09-01

1114

本篇讲述基于NodeJs、Vite、Vue3、Typescript搭建前端项目的详细步骤，此外还包括配置pinia（store）、router、跨域代理以及引入vant库的主要步骤。

Vue 3 + TypeScript + Vite 2024年4月最新管理系统基建

tangkebo的博客

04-23

1475

Vite2 + Vue3 + TypeScript + Pinia +ElementPlus搭建项目

MM_520131400的博客

04-23

2447

vite2搭建项目

Vue3+TypeScript+Django Rest Framework 搭建个人博客（一）：框架代码初始化

zgj0607的博客

08-25

1005

本文适合对有 Python 语言有一定基础的人群，希望利用 Python 做更多有意思的事情，比如搭建个人博客，记录自己的所思所想，或者想找一个项目实践前后端分离技术等等。跟着本文可以了解和运行项目，本项目是在 Window 10 Professional 系统下开发大家好，我是落霞孤鹜，上一篇介绍了开发博客的背景、技术栈，并介绍了如何搭建开发环境。这一篇介绍后端和前端的基础框架代码初始化，基于Django和Vue初始化项目框架代码，跑通Hello world。一、后端框架代码搭建后端 Pytho.

vue-cli 3 使用 require 动态加载图片

斯文~

10-22

1246

vue-cli 3 使用 require 动态加载图片

vue3+ts+vite 引入静态资源require报错 ——解决方案

陈福国的博客

07-31

2468

vue3中报错，导入reqire静态图片资源的时候，显示require不存在发现是在vite中不能使用require引入图片资源，因为这里的require是webpack提供的一种加载能力，由于我们使用的是Vite，因此这里必须转用 Vite提供的静态资源载入Vite中静态资源处理官方示例简单的说 new URL 一共接收两个参数，第一个参数即图片的路径，这里就是对应require中的值，第二个参数是vite的一个全局变量，可以理解成直接写死了 import.meta.url。

vue3+ts+vite动态使用本地图片

xiaoweistudy的博客

03-21

391

【代码】vue3+ts+vite动态使用本地图片。

vue3+vite动态引入静态资源(动态引入assets文件夹中的图片)

m0_58293192的博客

03-02

1815

vue3+vite动态引入静态资源(动态引入assets文件夹中的图片)

Vue3与TypeScript中动态加载图片资源的解决之道

chenchuang0128的博客

04-07

1169

然而，在实际的项目开发中，我们有时会遇到一些问题，比如在Vue3与TypeScript中动态加载图片资源时出现的404错误。同时，也要注意保持代码的清晰和可维护性，以便在后续的开发和维护中能够更加方便地处理类似的问题。这是因为Webpack等打包工具在处理静态资源时，并不会将图片的路径直接暴露给JavaScript代码，而是将其转换为模块化的形式。在Vue3与TypeScript中动态加载图片资源时遇到的404错误，通常是由于图片路径处理不当导致的。确保你的图片路径是基于这个公共路径的。

vue3 require动态加载图片及动态加载svg图

weixin_49066399的博客

03-26

1135

以下是本地图片及引用本地的svg图报错。2.解决本地引用svg图。1.解决本地图片引用。

Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源

热门推荐

Oliver尹的博客

07-28

2万+

Vue3+TypeScript+Vite的项目中如何使用require动态引入类似于图片等静态资源

vue3+vite不能使用require引入包的问题

11-14

Vue3 和 Vite 是现代前端开发中的两个热门技术栈。Vite 是一个高性能的前端构建工具，它采用了更轻量级的预加载策略，而 Vue3 则是 Vue 框架的最新版本，强调了组件化和 TypeScript 的支持。当你尝试使用 `require` 或者 `import * as` 来引入外部模块时，在 Vue3 + Vite 的组合下可能会遇到一些问题。这是因为 Vite 默认配置是基于 ES 模块（`.mjs` 文件），而不是 CommonJS（`.js` 文件）。CommonJS 的 `require` 功能在 Vite 中需要额外配置才能工作。解决这个问题通常需要做以下几步： 1. **安装 vite-plugin-commonjs**：这是用于启用 CommonJS 支持的插件，可以使用 npm 或 yarn 安装： ```bash npm install --save-dev vite-plugin-commonjs ``` 2. **在 vite.config.js 中添加插件配置**： ```javascript import { defineConfig } from 'vite'; import commonjs from 'vite-plugin-commonjs'; export default defineConfig({ plugins: [ commonjs(), ], }); ``` 3. 使用 `import` 替换 `require`：而不是 `require('package')`，你应该使用 `import package from './path/to/package'`。 4. 如果是在.vue 文件中使用，可以在文件顶部使用 `import.meta.glob` 或者 `<script setup>` 特性来动态导入，因为 Vue 组件默认只支持 ES 模块。注意，虽然上述步骤能解决大部分 `require` 的问题，但在某些大型项目中，完全迁移至 ES6 模块可能是更好的解决方案。