Saya mencari url yang tepat untuk mereferensikan aset statis, seperti gambar dalam Vue javascript.

Misalnya, saya membuat penanda selebaran menggunakan gambar ikon khusus, dan saya sudah mencoba beberapa url, tetapi semuanya mengembalikan 404 (Not Found):

Main.vue:

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

Saya sudah mencoba meletakkan gambar di folder aset dan folder statis tidak berhasil. Apakah saya harus memberi tahu vue untuk memuat gambar-gambar itu?

Bagi siapa pun yang ingin merujuk gambar dari template, Anda dapat merujuk gambar langsung menggunakan '@'

Contoh:

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

Dalam pengaturan reguler Vue, /assetstidak dilayani.

Gambar menjadi src="data:image/png;base64,iVBORw0K...YII="string, sebagai gantinya.

Menggunakan dari dalam JavaScript: require()

Untuk mendapatkan gambar dari kode JS, gunakan require('../assets.myImage.png'). Jalannya harus relatif (lihat di bawah).

Jadi kode Anda adalah:

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

Gunakan jalur relatif

Misalnya, Anda memiliki struktur folder berikut:

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

Jika Anda ingin mereferensikan gambar MyComponent.vue, jalurnya haruslah../assets/myImage.png

Berikut adalah KODE DEMO yang menunjukkannya beraksi.

Agar Webpack mengembalikan jalur aset yang benar, Anda perlu menggunakan require ('./ relative / path / to / file.jpg'), yang akan diproses oleh file-loader dan mengembalikan URL yang diselesaikan.

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

Lihat template VueJS - Menangani Aset Statis

Solusi yang lebih baik adalah

Menambahkan beberapa praktik baik dan keamanan ke jawaban @ acdcjunior, untuk digunakan @sebagai pengganti./

Dalam JavaScript

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

Dalam Template JSX

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

menggunakan @poin ke srcdirektori.

menggunakan ~poin ke akar proyek, yang membuatnya lebih mudah untuk mengakses node_modulesdan sumber daya tingkat akar lainnya

Tepat setelah membuka tag skrip, tambahkan import someImage from '../assets/someImage.png' dan gunakan untuk url ikoniconUrl: someImage

Sistem apa yang Anda gunakan? Webpack? Vue-loader?

Saya hanya akan melakukan brainstorming di sini ...

Karena .png bukan file JavaScript, Anda perlu mengkonfigurasi Webpack agar menggunakan file-loader atau url-loader untuk menanganinya. Proyek yang di-scaffold dengan vue-cli juga telah mengkonfigurasi ini untuk Anda.

Anda dapat melihat webpack.conf.jsuntuk melihat apakah itu dikonfigurasi dengan baik seperti

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

/assets adalah untuk file yang ditangani oleh webpack selama bundling - untuk itu, mereka harus direferensikan di suatu tempat di kode javascript Anda.

Aset lain dapat dimasukkan /static, konten folder ini akan disalin /distnanti apa adanya.

Saya menyarankan Anda untuk mencoba mengubah:

iconUrl: './assets/img.png'

untuk

iconUrl: './dist/img.png'

Anda dapat membaca dokumentasi resminya di sini: https://vue-loader.vuejs.org/en/configurations/asset-url.html

Semoga membantu Anda!

Memiliki struktur default folder yang dihasilkan oleh Vue CLI seperti src/assetsAnda dapat menempatkan gambar Anda di sana dan merujuknya dari HTML sebagai berikut <img src="../src/assets/img/logo.png">juga (bekerja secara otomatis tanpa perubahan apa pun pada penerapan juga).

Saya menggunakan skrip ketikan dengan vue, tapi begitulah cara saya melakukannya

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

Tentu saja src="@/assets/images/x.jpgberhasil, tetapi cara yang lebih baik adalah: src="~assets/images/x.jpg