在vue组件的ts脚本中导入图片

4 篇文章 0 订阅
3 篇文章 0 订阅

原先我是这么导入图片的,可以看到我加了一些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-off.png");

我希望使用import导入图片,改成:

import onLight from "../imgs/light-on.png";
import offLight from "../imgs/light-off.png";

编辑器显示can not find module …
编译器也报告同样的错误。

解决办法:
在src下创建typings目录,添加img.d.ts,内容如下:

declare module "*.svg";
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.gif";
declare module "*.bmp";
declare module "*.tiff";

这样就可以编译通过了。但是编辑器仍然显示上述错误,但是已经无关紧要了。
对比图

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Uniapp使用Vue3和TypeScript进行i18n,你可以按照以下步骤进行操作: 1. 创建一个main.ts文件,导入createApp函数和App组件,并导入i18n实例。然后使用createApp函数创建一个应用实例app,并通过app.use()方法使用i18n插件,最后使用app.mount()方法将应用挂载到指定的DOM元素上。具体代码如下所示: ```typescript import { createApp } from 'vue' import App from './App.vue' import i18n from './lang/index.js' const app = createApp(App) app.use(i18n) app.mount('#app') ``` 2. 在Vue组件使用i18n,你可以使用$t或t来访问翻译内容。可以在模板使用`$t`指令或双括号插值语法`{{ $t("home.title") }}`来显示翻译内容。你也可以在脚本使用`useI18n`函数解构出`t`方法来访问翻译内容。具体代码如下所示: ```typescript <template> <span>{{ $t("home.title") }}</span> <p>{{ t("home.title") }}</p> <p v-t="{ path: 'title', args: { count: 10 }}"></p> <i18n-t keypath="home.title" tag="p" locale="en" scope="global"></i18n-t> </template> <script setup lang="ts"> import { useI18n } from 'vue-i18n' const { t } = useI18n() </script> <style lang="less" scoped></style> ``` 3. 创建一个index.ts文件,导入createI18n函数和语言文件。在messages对象,将不同语言的翻译文件导入。然后通过createI18n函数创建一个i18n实例,并传入相应的配置参数,如legacy、globalInjection、locale和messages等。最后将i18n实例导出。具体代码如下所示: ```typescript import { createI18n } from 'vue-i18n' import en from './en' import cn from './cn' const messages = { en, cn } const i18n: any = createI18n({ legacy: false, globalInjection: true, locale: 'cn', messages }) export default i18n ``` 这样,在Uniapp使用Vue3和TypeScript进行i18n的配置就完成了。你可以根据你的具体需求进行相应的配置和修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vite+vue3+ts使用i18n](https://blog.csdn.net/weixin_59916662/article/details/127844219)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值