vue javascript内の静的資産を参照する方法

Question

Vue javascript内の画像のような静的資産を参照するための正しいURLを探しています。

例えば、私はカスタムアイコンイメージを使用したリーフレットマーカーを作成しています、と私はいくつかのURLを試してみたが、彼らはすべて404 (Not Found)を返す：

Main.vue：

var icon = L.icon({ 
    iconUrl: './assets/img.png', 
    iconSize:  [25, 25], 
    iconAnchor: [12, 12] 
}); 

を

私は、アセットフォルダと静的フォルダに画像を入れようとしましたが、運が悪いです。これらのイメージをどうにか読み込むようにvueに指示する必要がありますか？

Answer 1

どのようなシステムをお使いですか？ Webpack？ Vue-loader？

私だけ.PNGはJavaScriptファイルではありませんので、あなたがそれらを処理するために、ファイル・ローダーまたはURLローダを使用するようにWebPACKのを設定する必要があります...ここ

をブレーンストーミングます。 vue-cliで足場を張ったプロジェクトもこれを設定しました。

あなたはそれがうまく

... 
    { 
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
     loader: 'url-loader', 
     options: { 
      limit: 10000, 
      name: utils.assetsPath('img/[name].[hash:7].[ext]') 
     } 
     }, 
... 

/assetsのように構成されていますかどうかを確認するために、webpack.conf.jsを見てみることができます束ねる時にWebPACKのことで、ハンドルされているファイルのためのものです - そのために、彼らはあなたのどこかで参照する必要がありますJavaScriptコード。

/staticに他のアセットを入れることができますが、このフォルダの内容は現状のままで/distにコピーされます。

私は変更しようとすることをお勧めいたします：

iconUrl: './dist/img.png'

へ

iconUrl: './assets/img.png'

あなたがここに公式ドキュメントを読むことができます：https://vue-loader.vuejs.org/en/configurations/asset-url.html

は、それはあなたにお役に立てば幸い！

Answer 2

Vueの通常の設定では、/assetsは配信されません。

画像はsrc="data:image/png;base64,iVBORw0K...YII="文字列になります。 require()

をrequire('../assets.myImage.png')を使用して、JSコードから画像を取得するには：JavaScriptの内から使用

。パスは相対パスでなければなりません（下記参照）。

だからあなたのコードは次のようになります。必要であれば

- src 
    +- assets 
    - myImage.png 
    +- components 
    - MyComponent.vue 

：

var icon = L.icon({ 
    iconUrl: require('./assets/img.png'), // was iconUrl: './assets/img.png', 
    // ... 
}); 

使用相対パス

たとえば、次のようなフォルダ構造を持っていると言いますMyComponent.vueの画像を参照するには、パスはアクションでそれを示す../assets/myImage.png

ここだa DEMO CODESANDBOXなります。