Vue javascript içindeki resimler gibi statik varlıklara başvurmak için doğru url'yi arıyorum.

Örneğin, özel bir simge görüntüsü kullanarak bir broşür işaretleyici oluşturuyorum ve birkaç url denedim, ancak hepsi bir döndürüyor 404 (Not Found):

Ana.vue:

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

Görüntüleri varlıklar klasörüne ve statik klasöre koymayı şanssız bir şekilde denedim. Vue'ya bu resimleri bir şekilde yüklemesini söylemem gerekiyor mu?

Şablondaki resimlere başvurmak isteyenler için, doğrudan '@' kullanarak resimlere başvurabilirsiniz.

Misal:

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

Bir Vue normal kurulumunda /assetssunulmaz.

Bunun src="data:image/png;base64,iVBORw0K...YII="yerine görüntüler dizelere dönüşür.

JavaScript içinden kullanmak: require()

Görüntüleri JS kodundan almak için require('../assets.myImage.png'). Yol göreceli olmalıdır (aşağıya bakın).

Yani kodunuz şöyle olacaktır:

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

Göreli yol kullan

Örneğin, aşağıdaki klasör yapısına sahip olduğunuzu varsayalım:

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

MyComponent.vueİçindeki görüntüye başvurmak istiyorsanız , yol olmalıdır../assets/myImage.png

İşte onu çalışırken gösteren bir DEMO KODLARI VE KUTUSU .

Daha iyi bir çözüm olurdu

@ Acdcjunior'un cevabına bazı iyi uygulamalar ve güvenlik eklemek, @yerine kullanmak./

JavaScript'te

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

JSX Şablonunda

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

kullanarak @puan srcdizininde.

~Proje köküne yönelik noktaları kullanmak , bu da node_modulesve diğer kök düzeyindeki kaynaklara erişimi kolaylaştırır

Webpack'in doğru varlık yollarını döndürmesi için, dosya yükleyici tarafından işlenecek ve çözülen URL'yi döndüren gereksinim ('./ göreli / yol / dosya.jpg'ye') kullanmanız gerekir.

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

Bkz. VueJS şablonları - Statik Varlıkları İşleme

Komut dosyası etiketini açtıktan hemen sonra, import someImage from '../assets/someImage.png' onu bir simge url'si için ekleyin ve kullanıniconUrl: someImage

Hangi sistemi kullanıyorsun? Web paketi mi? Vue yükleyici?

Burada sadece beyin fırtınası yapacağım ...

.Png bir JavaScript dosyası olmadığından, Webpack'i bunları işlemek için dosya yükleyici veya url yükleyici kullanacak şekilde yapılandırmanız gerekir. Vue-cli ile inşa edilen proje de bunu sizin için yapılandırdı.

Gibi webpack.conf.jsiyi yapılandırılmış olup olmadığını görmek için bir göz atabilirsiniz.

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

/assets gruplama sırasında web paketi tarafından işlenen dosyalar içindir - bunun için javascript kodunuzda bir yerde referans gösterilmesi gerekir.

Diğer varlıklar yerleştirilebilir /static, bu klasörün içeriği /distdaha sonra olduğu gibi kopyalanacaktır .

Değiştirmeyi denemenizi tavsiye ederim:

iconUrl: './assets/img.png'

-e

iconUrl: './dist/img.png'

Resmi belgeleri buradan okuyabilirsiniz: https://vue-loader.vuejs.org/en/configurations/asset-url.html

Umarım size yardımcı olur!

src/assetsGörüntünüzü oraya yerleştirebileceğiniz gibi Vue CLI tarafından oluşturulan klasörlerin varsayılan yapısına sahip olmak ve buna aşağıdaki <img src="../src/assets/img/logo.png">gibi HTML'den de başvurabilirsiniz (dağıtımda herhangi bir değişiklik olmadan otomatik olarak çalışır).

Vue ile typcript kullanıyorum, ama bu şekilde başladım

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

bu nihayet benim için çalıştı, görüntü destek olarak geçti:

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

Elbette src="@/assets/images/x.jpgişe yarıyor, ancak daha iyi bir yol: src="~assets/images/x.jpg