Szukam odpowiedniego adresu URL do odwoływania się do statycznych zasobów, takich jak obrazy w javascript Vue.

Na przykład tworzę znacznik ulotki za pomocą niestandardowego obrazu ikony i próbowałem kilku adresów URL, ale wszystkie zwracają 404 (Not Found):

Main.vue:

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

Próbowałem umieścić obrazy w folderze zasobów i folderze statycznym bez powodzenia. Czy muszę w jakiś sposób mówić Vue, żeby załadował te obrazy?

Dla każdego, kto chce odsyłać obrazy z szablonu, możesz odsyłać obrazy bezpośrednio za pomocą „@”

Przykład:

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

W zwykłej konfiguracji Vue /assetsnie jest wyświetlany.

src="data:image/png;base64,iVBORw0K...YII="Zamiast tego obrazy stają się ciągami.

Korzystanie z JavaScript: require()

Aby pobrać obrazy z kodu JS, użyj require('../assets.myImage.png'). Ścieżka musi być względna (patrz poniżej).

Twój kod wyglądałby więc tak:

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
    // ...
});

Użyj ścieżki względnej

Na przykład załóżmy, że masz następującą strukturę folderów:

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

Jeśli chcesz odwołać się do obrazu w programie MyComponent.vue, ścieżka powinna być../assets/myImage.png

Oto DEMO CODESANDBOX pokazujący to w akcji.

Aby pakiet Webpack zwrócił prawidłowe ścieżki zasobów, musisz użyć require ('./relative / path / to / file.jpg'), który zostanie przetworzony przez program ładujący pliki i zwróci rozwiązany adres URL.

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

Zobacz szablony VueJS - obsługa zasobów statycznych

Lepszym rozwiązaniem byłoby

Dodanie dobrych praktyk i bezpieczeństwa do odpowiedzi @ acdcjunior, @zamiast używać./

W JavaScript

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

W szablonie JSX

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

używając @punktów do srckatalogu.

używanie ~punktów do katalogu głównego projektu, co ułatwia dostęp do node_modulesi innych zasobów poziomu głównego

Zaraz po otwarciu tagu skryptu po prostu dodaj import someImage from '../assets/someImage.png' i użyj go jako adresu URL ikonyiconUrl: someImage

Z jakiego systemu korzystasz? Webpack? Vue-loader?

Będę tylko robić burzę mózgów ...

Ponieważ .png nie jest plikiem JavaScript, musisz skonfigurować pakiet Webpack, aby używał programu ładującego pliki lub programu ładującego adresy URL do ich obsługi. Projekt rusztowania z vue-cli również skonfigurował to dla Ciebie.

Możesz rzucić okiem webpack.conf.js, aby sprawdzić, czy jest dobrze skonfigurowany, jak

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

/assets dotyczy plików, które są obsługiwane przez pakiet WebPack podczas pakowania - w tym celu należy odwołać się do nich gdzieś w kodzie javascript.

Można w nim umieścić inne zasoby /static, zawartość tego folderu zostanie skopiowana do /distpóźniejszego stanu.

Polecam spróbować zmienić:

iconUrl: './assets/img.png'

do

iconUrl: './dist/img.png'

Możesz przeczytać oficjalną dokumentację tutaj: https://vue-loader.vuejs.org/en/configurations/asset-url.html

Mam nadzieję, że ci to pomoże!

Mając domyślną strukturę folderów generowanych przez Vue CLI, na przykład src/assetsmożesz umieścić tam swój obraz i odnieść się do niego z HTML w następujący sposób <img src="../src/assets/img/logo.png">(działa również automatycznie bez żadnych zmian podczas wdrażania).

Używam maszynopisu z vue, ale tak się do tego zabrałem

<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>

Oczywiście src="@/assets/images/x.jpgdziała, ale lepszy sposób to: src="~assets/images/x.jpg