2

多くのプロジェクトで使用できるいくつかのコンポーネントを含む vuejs ライブラリを作成しました。そのライブラリには、html (svg-icon) でインラインで使用される svg ファイルをロードできるコンポーネントがあります。

それはうまくいきます。

しかし、この同じライブラリには、ライブラリに保存されている svg イメージで svg-icon を使用する別のコンポーネントがあります。

重要な点として、このライブラリ (ノード モジュール) を npm リンクで使用したい

svg 画像のパス、または保存場所を指定する良い方法はどれですか?

私は多くの異なるパスを試しましたが、どれも機能していません...

これは私の svg-icon コンポーネントです:

<template>
   <component :is="component"></component>
</template>

<script>
 export default {
   name: 'SvgIcon',
   props: {
     icon: {
       type: String,
       required: true
     }
   },
   data () {
     return {
       component: null
     }
   },
   watch: {
     icon: () => {
       this.load()
     }
   },
   computed: {
     loader () {
       return () => import(this.icon)
     }
   },
   methods: {
     load () {
       this.loader().then(() => {
         this.component = () => this.loader()
       })
     }
   },
   mounted () {
     this.load()
   }
 }
</script>

そして、これはsvg-iconを使用するコンポーネントです（実際にはsvg画像は同じフォルダーにあります）：

<template>
   <svg-icon icon="~my-module/components/media/no-image.svg"></svg-icon>
   <svg-icon icon="./no-image.svg"></svg-icon>
</template>
<script>
import SvgIcon from '../svg-icon/SvgIcon'

export default {
  components: {
    SvgIcon
  }
}
</script>

私はいつもこのエラーを受け取りました：

Cannot find module '~my-module/components/media/no-image.svg'

Cannot find module './no-image.svg'

その状況で良い道はどれですか？または、svg ファイルを別の場所に配置する必要がありますか? （図書館に置いておきたい）

4

1 に答える 1

1

ここに CodeSandbox を作成しました

SvgIcon.vue

<template>
  <span v-html="icon"></span>
</template>
<script>
export default {
  name: "SvgIcon",
  props: {
    icon: {
      type: String,
      required: true
    }
  }
};
</script>

HelloWorld.vue

//Usage
<template>
  <svg-icon :icon="AlertIcon"></svg-icon>
</template>
<script>
import AlertIcon from "../assets/alert.svg";
import SvgIcon from "./SvgIcon";

export default {
  data() {
    return { AlertIcon };
  },
  components: {
    SvgIcon
  }
};
</script>

コンポーネントにいくつかの変更を加えました。

  1. 画像をインポートしてコンポーネントに渡す必要があります。これは、動的インポートが絶対パスになると複雑になるためです。
  2. SvgIconコードから不要なフィールドをいくつか削除しました。

お役に立てれば。

于 2019-04-25T13:14:45.683 に答える