Vue javascript内の画像など、静的アセットを参照するための適切なURLを探しています。

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

Main.vue：

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

画像をアセットフォルダーと静的フォルダーに入れてみましたが、うまくいきませんでした。どういうわけかそれらの画像をロードするようにvueに指示する必要がありますか？

テンプレートから画像を参照しようとしている人は、「@」を使用して画像を直接参照できます。

例：

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

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',
//  iconUrl: require('@/assets/img.png'), // use @ as alternative, depending on the path
    // ...
});

相対パスを使用する

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

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

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

ここだDEMO CODESANDBOXアクションでそれを示したが。

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テンプレート-静的アセットの処理を参照してください

より良い解決策は

@acdcjuniorの回答にいくつかのグッドプラクティスと安全性を追加して、@代わりに使用する./

JavaScriptの場合

require("@/assets/images/user-img-placeholder.png")

JSXテンプレート内

<img src="@/assets/images/user-img-placeholder.png"/>

ディレクトリ@へのポイントを使用しsrcます。

~プロジェクトルートへのポイントを使用すると、node_modulesおよびその他のルートレベルのリソースに簡単にアクセスできます。

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

どのシステムを使用していますか？Webpack？Vueローダー？

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

.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

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

src/assets画像をそこに配置し、HTMLから次のように参照できるなど、Vue CLIによって生成されたフォルダーのデフォルト構造があります<img src="../src/assets/img/logo.png">（展開時に変更を加えることなく自動的に機能します）。

私はvueでtypescriptを使用していますが、これが私がそれを行った方法です

<template><div><img :src="MyImage" /></div></template>
<script lang="ts">
    import { Vue } from 'vue-property-decorator';
    export default class MyPage extends Vue {
            MyImage = "../assets/images/myImage.png";
        }
</script>

これは最終的に私のために働きました、画像は小道具として渡されました：

<img :src="require(`../../assets/${image}.svg`)">

もちろんsrc="@/assets/images/x.jpg機能しますが、より良い方法は次のとおりです。 src="~assets/images/x.jpg