web-dev-qa-db-ja.com

vue javascript内の静的アセットを参照する方法

Vue javascript内の画像のような静的アセットを参照する正しいURLを探しています。

たとえば、カスタムアイコン画像を使用してリーフレットマーカーを作成し、いくつかのURLを試しましたが、それらはすべて404 (Not Found)を返します。

Main.vue：

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

幸運にもアセットフォルダーと静的フォルダーに画像を入れてみました。 vueにそれらの画像を何らかの方法で読み込むように指示する必要がありますか？

javascriptvue.jsleaflet
26
JBaczuk

テンプレートから画像を参照する場合は、「@」を使用して画像を直接参照できます

例：

<img src="@/assets/images/home.png"/>
51
azy777

Vueの通常のセットアップでは、/assetsは提供されません。

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


JavaScript内からの使用：require()

JSコードから画像を取得するには、require('../assets.myImage.png')を使用します。パスは相対パスでなければなりません（以下を参照）。

したがって、コードは次のようになります。

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


相対パスを使用

たとえば、次のフォルダー構造があるとします。

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

MyComponent.vueで画像を参照する場合、パスは../assets/myImage.pngになります


a DEMO CODESANDBOX 動作中を示しています。

31
acdcjunior

Webpackが正しいアセットパスを返すには、require（ './ relative/path/to/file.jpg'）を使用する必要があります。これはファイルローダーによって処理され、解決されたURLを返します。

computed: {
  iconUrl () {
    return require('./assets/img.png')
    // The path could be '../assets/img.png', etc., which depends on where your vue file is
  }
}

VueJSテンプレート-静的アセットの処理 を参照してください

12
Yuci

スクリプトタグを無効にした直後にimport someImage from '../assets/someImage.png'を追加して、アイコンURL iconUrl: someImageに使用します

4
neberaa

どのシステムを使用していますか？ Webpack？ Vue-loader？

ここでブレーンストーミングするだけです...

.pngはJavaScriptファイルではないため、ファイルローダーまたはurlローダーを使用してそれらを処理するようにWebpackを構成する必要があります。 vue-cliでスキャフォールディングされたプロジェクトもこれを設定しました。

webpack.conf.jsを見て、次のように適切に構成されているかどうかを確認できます。

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

/assetsは、バンドル中にwebpackによって処理されるファイル用です-そのため、JavaScriptコードのどこかで参照する必要があります。

他のアセットは/staticに入れることができ、このフォルダーのコンテンツは/distにそのままコピーされます。

変更することをお勧めします：

iconUrl: './assets/img.png'

に

iconUrl: './dist/img.png'

公式ドキュメントはこちらでご覧いただけます： https://vue-loader.vuejs.org/en/configurations/asset-url.html

それがあなたに役立つことを願っています！

0
JP. Aulet