【Vue3+Ts】动态引入图片路径/require引入错误

Vue3+TS+Vite无法使用require导入图片的解决方法

vue3+vite+ts 中引入图片

【代码】vue3+vite 态引用静态资源，动态引入assets文件夹图片的几种方式。

因为vue3相对vue2来说已经取消了“require”这块，在vue2中不管是页面还是js板块中引用图片途径的话都可以require('@images/xxx.png')，但是经过测试发现vue3如果这种引用的话是会报错的，提示找不到require vue2中的vue.config.js配置@images别名 下面是正式在vue3引用的方法 首先说下我这个图片放置路径，我是放在assets/images/文件夹中 1、在页面内引用 <img src="../asset..

需要动态引入background-image，如果在css中静态写入的话没有问题，但是使用变量动态引入，由于vite打包后，无法找到路径。

vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题。实际上我们不希望资源文件被wbpack编译可以把图片放到public 目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致，这点跟webpack是一致的。我们的目标静态文件在 src/assets/images/home/home_icon.png。

文章目录背景原因解决方案1. 放到`public`目录下，使用绝对路径（`不适用动态情况`）2. 使用`import`导入（`适用于单个`）3. `new URL() + import.meta.url` （`支持多个，推荐`）官网 背景 img的src属性使用动态的时候，本地正常，部署到服务器上异常 <img :src="image" v-for="image in urls" /> 原因 如果资源在assets文件夹，打包后会把图片名加上hash值，直接通过:src="image"方式引入

/ 新增// 对某些文件进行单独配置（这里针对 TypeScript 文件）files: [‘.ts’, 'rules: {‘no-undef’: ‘off’, // 在 TypeScript 中没有必要使用 no-undef 规则},},],// 自定义规则rules: {// 函数的复杂度是指函数中控制流程的复杂程度，例如条件语句、循环语句、嵌套等。复杂度越高，函数的可读性和可维护性可能越差。

Vue3+ts项目中svg封装配置

预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

vue3+ts 静态引用本地图片

介绍在Vue3中，引用图片路径的3种方式

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

vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题我们看到实际上我们不希望资源文件被wbpack编译，这点跟webpack是一致的我们的目标静态文件在。

官网上的使用require引入,对于vue3+ts开发不适用,如果使用require会报错"requireisnotdefined"因此想要引入成功需要使用import的方式。

vue3 + vite +ts 引入静态图片vue3 + vite +ts 引入静态图片vue3 + vite +ts 引入静态图片vue3 + vite +ts 引入静态图片vue3 + vite +ts 引入静态图片vue3 + vite +ts 引入静态图片