vue-cli スキャフォールディングに画像を導入する方法 (コード)

この記事の内容は、vue-cli スキャフォールディングに画像 (コード) を導入する方法についてです。必要な方は参考にしていただければ幸いです。

1.インポート方法

ステップ1: .vueファイルの「パス」から編集をインポートします(パスは画像と.vueの間の相対パスです)

ステップ2: データオブジェクトで属性編集を定義します、値は edit に対応します

ステップ 3: 属性をテンプレートのラベルにバインドします

最後にインターフェースを更新して効果を確認します。

2. 静的メソッド

ステップ 1: 画像を静的フォルダーに配置し、属性値は画像と .vue

Step の間の相対パスです。 2: テンプレート中 ラベルに属性をバインドします

更新して効果を確認します

vue コンポーネント CSS の背景画像パスエラーの問題を解決します

前提として、vue-cil を使用し、次に ExtractTextPlugin.extract(ビルド ディレクトリの utils.js {}) に次の属性を追加すると、publicPath の問題が完全に解決されます: '../../'

説明

ファイルは最終的にパッケージ化され、次のように圧縮されます。 js.実行すると、CSS 内の相対パスがルート ディレクトリを指すように変更されるため、読み込みエラーが発生します。

このプラグインの説明は次のとおりです。

extract-text-webpack-plugin

機能: このプラグインの主な目的は、CSS スタイルを抽出し、js のスタイルのパッケージ化によって引き起こされるページ スタイルの読み込み障害を防ぐことです。

プラグインパラメータ: プラグインには次の意味を持つ 3 つのパラメータがあります:

use: ファイルをコンパイルするために必要なローダーの種類を参照します。ソースファイルは .css であるため、ここでは css-loader が選択されます。

フォールバック: CSS ファイルのコンパイル後に抽出するために使用されるローダー

publicfile: プロジェクト パスを上書きし、CSS ファイルのファイル パスを生成するために使用されます

関連する推奨事項:

vue-cli スキャフォールディング初期化の使用方法

グラフィック解析 vue-cliスキャフォールディングの使い方

以上がvue-cli スキャフォールディングに画像を導入する方法 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。