第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何在 Vue 3 中導(dǎo)入 svg?

如何在 Vue 3 中導(dǎo)入 svg?

我嘗試了以下操作: https://github.com/visualfanatic/vue-svg-loader/tree/master但與 vue-template-compiler 存在版本沖突,因?yàn)樗?Vue 2 中使用。我嘗試過(guò): https: //github.com/visualfanatic/vue-svg-loader但我缺少一個(gè)特定的 vue 依賴項(xiàng)。我注意到使用打字稿有一個(gè)警告,您需要聲明類型定義文件。但是,我仍然得到“找不到模塊 '../../assets/myLogo.svg' 或其相應(yīng)的類型聲明”。這是我添加的內(nèi)容:視圖.config.jsmodule.exports = {  chainWebpack: (config) =>   {    const svgRule = config.module.rule('svg');    svgRule.uses.clear();    svgRule      .use('vue-loader-v16')      .loader('vue-loader-v16')      .end()      .use('vue-svg-loader')      .loader('vue-svg-loader');  },  configureWebpack: process.env.NODE_ENV === 'production' ? {} : {    devtool: 'source-map'  },  publicPath: process.env.NODE_ENV === 'production' ?    '/PersonalWebsite/' : '/'}墊片-svg.d.tsdeclare module '*.svg' {  const content: any;  export default content;}我的組件.vue<template>  <div>     <MyLogo />  </div></template><script>import * as MyLogo from "../../assets/myLogo.svg";export default defineComponent({  name: "MyComponent",  components: {    MyLogo  },  props: {      },  setup(props)  {    return {      props    };  }});</script>
查看完整描述

4 回答

?
墨色風(fēng)雨

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超6個(gè)贊

實(shí)際上,Vue CLI 開箱即用地支持 SVG。它在內(nèi)部使用文件加載器。您可以通過(guò)在終端上運(yùn)行以下命令來(lái)確認(rèn):

vue?inspect?--rules

如果列出了“svg”(應(yīng)該是),那么您所要做的就是:

<template>

? <div>

? ? <img :src="myLogoSrc" alt="my-logo" />

? </div>

</template>


<script>

? // Please just use `@` to refer to the root "src" directory of the project

? import myLogoSrc from "@/assets/myLogo.svg";


? export default defineComponent({

? ? name: "MyComponent",


? ? setup() {

? ? ? return {

? ? ? ? myLogoSrc

? ? ? };

? ? }

? });

</script>

因此,如果您的純粹目的只是顯示 SVG,則不需要任何第三方庫(kù)。


當(dāng)然,要滿足 TypeScript 編譯器對(duì)類型聲明的要求:


declare module '*.svg' {

? // It's really a string, precisely a resolved path pointing to the image file

? const filePath: string;


? export default filePath;

}


查看完整回答
反對(duì) 回復(fù) 2023-09-28
?
萬(wàn)千封印

TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊

vue-svg-loader 與 vue 3 不兼容。要導(dǎo)入 svg 并將其用作組件,只需將文件內(nèi)容包裝在“template”中


在組件中:


<template>

  <div class="title">

    <span>Lorem ipsum</span>

    <Icon />

  </div>

</template>


<script>

import Icon from '~/common/icons/icon.svg';


export default {

  name: 'PageTitle',

  components: { Icon },

};

</script>

網(wǎng)頁(yè)包:


{

   test: /\.svg$/,

   use: ['vue-loader', path.resolve(__dirname, 'scripts/svg-to-vue.js')],

}

腳本/svg-to-vue.js:


module.exports = function (source) {

  return `<template>\n${source}\n</template>`;

};


查看完整回答
反對(duì) 回復(fù) 2023-09-28
?
暮色呼如

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超9個(gè)贊

不能肯定地說(shuō),因?yàn)槲疫€沒有嘗試過(guò) ts,


declare module '*.svg' {

? ? import type { DefineComponent } from 'vue';

? ? const component: DefineComponent;

? ? export default component;

}

我看到你正在使用:


import * as MyLogo from "../../assets/myLogo.svg";

我認(rèn)為應(yīng)該是:


import MyLogo from "../../assets/myLogo.svg";


查看完整回答
反對(duì) 回復(fù) 2023-09-28
?
HUWWW

TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊

全新安裝的 vue.js 3.2 的示例:

<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125"/>


查看完整回答
反對(duì) 回復(fù) 2023-09-28
  • 4 回答
  • 0 關(guān)注
  • 277 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)