Bagaimana mereferensikan aset statis dalam vue javascript

90

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?

JBaczuk
sumber
webpack? Itu biasanya ingin tahu apakah gambar disertakan sehingga dimasukkan ke dalam bundel. Sistem bundling lainnya mungkin tidak peduli, selama image tersebut disebarkan ke server Anda
akatakritos

Jawaban:

158

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

Contoh:

<img src="@/assets/images/home.png"/>
azy777
sumber
2
... asalkan Anda memiliki folder src / assets / images. Di luar kotak, vue-loader menyalin aset dari src / .. / ... ke build /../ .. ATAU membuat gambar yang lebih kecil menjadi sebaris sebagai data.image / png .. secara otomatis.
Johanness
9
tidak bekerja untuk saya: This dependency was not found:* @/assets/more-ico.svg. To install it, you can run: npm install --save @/assets/more-ico.svg...
Jakub Strebeyko
2
Juga tidak berhasil untuk saya, tetapi ..... kemudian saya melihat bahwa saya menggunakan nama file yang salah; p bekerja dengan sempurna!
Larzan
6
Ini berfungsi, tetapi pada template, jika Anda ingin menggunakan di properti css background-img, coba sesuatu seperti ../../assets/bg/login.svg, dengan gambar ke dalam folder aset
calebeaires
5
Terima kasih. Dokumentasi vue tentang aset statis tidak perlu bertele-tele dan mengubur kasus penggunaan utama ini hampir di bagian bawah halaman, dalam poin-poin kecil.
Our_Benefactors
65

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.

acdcjunior.dll
sumber
2
Setelah merancang aplikasi saya dengan vue-cli, teknik ini berhasil untuk saya. Kotak pasir kode sangat membantu. Jawabannya tidak sejelas sandbox kode.
revdrjrr
require('./assets/img.png')tidak berhasil untuk saya dalam opsi komponen saya, saya harus mengganti. dengan @ a: require('@/assets/img.png').
Michael
22

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

Yuci
sumber
21

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

Muhammad
sumber
Bagaimana jika ini bukan gambar melainkan file teks atau csv? Dan hanya ingin mendapatkan jalur / url?
trainoasis
7

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

neberaa
sumber
Ini bekerja dengan baik untuk saya saat memasukkan '@' dalam impor.
vab2048
2

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!

JP. Aulet
sumber
Saya tidak yakin sistem apa yang saya gunakan, atau apakah saya harus menambahkannya secara manual. Saya mencoba url ./dist dan tidak berhasil
JBaczuk
0

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

Daniel Danielecki
sumber
0

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>
Michael
sumber
-3

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

Farzad.Kamali
sumber
2
Bisakah Anda memberikan penjelasan?
JBaczuk