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 トランザクション自動コミット自動コミット操作
序文最良の方法は、あなたが思いつく最も速い方法ではないかもしれません。職場で一時的に使用するスクリプ...
ビルドを無効にするパーティション式では、次の構成はサポートされません。ストアドプロシージャ、ストアド...
問題<br />レスポンシブ レイアウトでは、iframe 要素に注意する必要があります...
カスケードを制御するために CSS の任意のプロパティに割り当てることができる特別な値が 2 つあり...
序文この記事は主にMySQLメタデータ生成Hiveテーブル作成ステートメントコメントスクリプトに関す...
目次インストール: 1. ファイアウォールの基本的な使い方2. ファイアウォールd-cmdを設定する...
目次要件:実装手順:この記事では主に以下について説明します: カスタムツリーコントロール<el...
環境: 1 CentOS Linux リリース 7.5.1804 (コア)ファイアウォールと sel...
効果原理主にCSSグラデーションを使用して、切り取りを必要としない背景のくり抜きを実現します。クーポ...
まずは例を見てみましょうコードをコピーコードは次のとおりです。 <!DOCTYPE html ...
<br />ウェブサイトを科学的にデザインする: アイトラッキング研究から学ぶ 23 の...
Macはシェル(ターミナル)SSHを使用してリモートサーバーに接続します前提条件: 接続する必要があ...
序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...
この記事では主に基本的なチャットの実装方法を紹介します。今後は絵文字や写真のアップロードなどの機能も...
目次序文実装のアイデア実装コード成果を達成する序文これは、テーブルを動的に追加する例です。[追加] ...