HTMLを学ぶとき、画像タグ<img>は画像を導入します <img src="../assets/images/avatar.png" width="100%"> しかし、これには 2 つの欠点があります。
何をするか?動的パスインポートとrequireを使用するまず、この2人の兄弟について話しましょう。ES6以前は、JSには独自のモジュール構文がありませんでした。この恥ずかしさを解決するために、require.jsが作成されました。ES6がリリースされた後、JSはimportの概念を導入しました。 インポートを使用してインポートインポート後、データに登録する必要があります。登録しないと表示されません。 <スクリプト> '@/assets/images/cityOfVitality/lf1.png' から lf1 をインポートします。 '@/assets/images/cityOfVitality/lf2.png' から lf2 をインポートします。 '@/assets/images/cityOfVitality/lf3.png' から lf3 をインポートします。 '@/assets/images/cityOfVitality/lf4.png' から lf4 をインポートします '@/assets/images/cityOfVitality/lf5.png' から lf5 をインポートします '@/assets/images/cityOfVitality/lf6.png' から lf6 をインポートします '@/assets/images/cityOfVitality/lf7.png' から lf7 をインポートします '@/assets/images/cityOfVitality/icon_top1.png' から top1 をインポートします。 './mixins' からミックスインをインポートします エクスポートデフォルト{ 名前: 'LeftPiece'、 ミックスイン: [ミックスイン], データ () { 戻る { lf1、 lf2、 lf3、 lf4、 lf5、 lf6、 lf7、 トップ1 } } } </スクリプト> require を使用してインポートする<スクリプト> '@/assets/images/cityOfVitality/icon_top1.png' から top1 をインポートします。 './mixins' からミックスインをインポートします エクスポートデフォルト{ 名前: 'RightPiecr', ミックスイン: [ミックスイン], データ () { 戻る { rt1: require('@/assets/images/cityOfVitality/rt1.png'), rt2: require('@/assets/images/cityOfVitality/rt2.png'), rt3: require('@/assets/images/cityOfVitality/rt3.png'), rt4: require('@/assets/images/cityOfVitality/rt4.png'), rt5: require('@/assets/images/cityOfVitality/rt5.png'), rt6: require('@/assets/images/cityOfVitality/rt6.png'), トップ1 } } } </スクリプト> これで、img 画像を Vue ページに導入する方法に関するこの記事は終了です。img 画像を Vue に導入する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: HTML テーブル マークアップ チュートリアル (39): ヘッダーの明るい境界線の色属性 BORDERCOLORLIGHT
>>: MySQL トランザクション自動コミット自動コミット操作
コードをコピーコードは次のとおりです。 <span style="font-size...
1》ウェブデザインが得意であること2》Webページのデザイン方法を知る3》計画する4. SEOを理解...
MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...
HTML ページでは、ボタンやテキスト ボックスなどの視覚要素にフォーカスを設定したり、フォーカスを...
この記事では、Ubuntu 18.04でのVMware Toolsのインストールと設定について記録し...
以前、上司からログイン後にチェックマークを表示できるプログラムを作るように言われたのですが、Baid...
目次まずwgetをインストールするヘルプマニュアルを見る1. wgetを使用して単一のファイルをダウ...
少し前にTik Tokを見ていて、フォローするときのボタンアニメーションがとても美しいと思ったのと、...
Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...
ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...
1. インライン スタイル (<body></body> 内に配置されます)...
現在の要件は、ファイルのアップロード ボタンがあることです。ボタンをクリックすると、アップロードする...
目次1. DHCP サービス (動的ホスト構成プロトコル) 1. 背景2. 概要3. 利点4.DHC...
el-dialogをコンポーネントとしてカプセル化するelement-ui を使用する場合、ポップア...
目次序文コンポーネントの紹介クラスコンポーネントの作成状態についてレンダリングについて関数コンポーネ...