Rumah hujung hadapan web tutorial js vue :src 文件路径错误问题如何处理

vue :src 文件路径错误问题如何处理

May 21, 2018 pm 01:59 PM
bagaimana kesilapan soalan

这次给大家带来vue :src 文件路径错误问题如何处理,处理vue :src 文件路径错误问题的注意事项有哪些,下面就是实战案例,一起来看一下。

首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助

 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和<code><a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>:url(./logo.png),”./logo.png”是相对资源路径,将有webpack解析为模块依赖
 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方,不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过config.js文件中的build.assetsPublicbuild.assertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用:/static[filename]
 根据webpack的特性,总的来说就是static放不会变动的,第三档的文件,asserts放可能会变动的文件

问题来了,用js动态加载assets或者本文件的图片出现404的状态码

代码实例

<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
//js部分
data(){
 return {
 images:[{src:'./1.png'},{./2.png}]
 }
}
Salin selepas log masuk

跑起来发现图片不显示,错误码为404,

 原因:在webpack中会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法解析图片地址,然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径都会被解析为/static/img/[filename].png,完整地址为localhost:8080/static/img/[filename].png

 解决办法:

  ①将图片作为模块加载进去,比如images:[{src:<a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>(‘./1.png')},{src:require(‘./2.png')}]这样webpack就能将其解析。

  ②将图片放到static目录下,但必须写成绝对路径如images:[{src:”/static/1.png”},{src:”/static/2.png”}]这样图片也会显示出来,当然你也可以通过在webpack.base.config.js定义来缩短路径的书写长度。

当然你说当本地图片太多时,这样写岂不是很麻烦,那么其实我们是一这样简化操作的。

第一步:在static里面新建一个json文件夹

第二部:填写json文件,如图

第三部:将json引入响应的vue文件中,解析引用就行了

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

AngularJS中$http服务使用方法详解

vue addRoutes实现动态权限路由菜单步骤详解

Atas ialah kandungan terperinci vue :src 文件路径错误问题如何处理. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tidak dapat menyelesaikan operasi (Ralat 0x0000771) Ralat pencetak Tidak dapat menyelesaikan operasi (Ralat 0x0000771) Ralat pencetak Mar 16, 2024 pm 03:50 PM

Jika anda menemui mesej ralat semasa menggunakan pencetak anda, seperti operasi tidak dapat diselesaikan (ralat 0x00000771), ini mungkin kerana pencetak telah diputuskan sambungan. Dalam kes ini, anda boleh menyelesaikan masalah melalui kaedah berikut. Dalam artikel ini, kami akan membincangkan cara membetulkan isu ini pada Windows 11/10 PC. Keseluruhan mesej ralat berkata: Operasi tidak dapat diselesaikan (ralat 0x0000771). Pencetak yang ditentukan telah dipadamkan. Betulkan 0x00000771 Ralat Pencetak pada Windows PC Untuk membetulkan Ralat Pencetak operasi tidak dapat diselesaikan (Ralat 0x0000771), pencetak yang ditentukan telah dipadamkan pada Windows 11/10 PC, ikut penyelesaian ini: Mulakan semula Print Spool

Mendedahkan punca kod status HTTP 460 Mendedahkan punca kod status HTTP 460 Feb 19, 2024 pm 08:30 PM

Menyahsulit kod status HTTP 460: Mengapakah ralat ini berlaku? Pengenalan: Dalam penggunaan rangkaian harian, kami sering menghadapi pelbagai gesaan ralat, termasuk kod status HTTP. Kod status ini ialah mekanisme yang ditakrifkan oleh protokol HTTP untuk menunjukkan pemprosesan permintaan. Di antara kod status ini, terdapat kod ralat yang agak jarang berlaku, iaitu 460. Artikel ini akan menyelidiki kod ralat ini dan menerangkan sebab ralat ini berlaku. Definisi kod status HTTP 460: Pertama, kita perlu memahami asas kod status HTTP

Permulaan Kotak Pasir Windows gagal - Akses Ditolak Permulaan Kotak Pasir Windows gagal - Akses Ditolak Feb 19, 2024 pm 01:00 PM

Adakah Windows Sandbox ditamatkan dengan Windows Sandbox Unable to Start, Ralat 0x80070005, Access Denied message? Sesetengah pengguna melaporkan bahawa Windows Sandbox tidak boleh dibuka. Jika anda juga menghadapi ralat ini, anda boleh mengikuti panduan ini untuk membetulkannya. Windows Sandbox gagal dimulakan - Access Denied Jika Windows Sandbox ditamatkan dengan Windows Sandbox Unable to Start, Ralat 0x80070005, Access Denied message, pastikan anda log masuk sebagai pentadbir. Ralat jenis ini biasanya disebabkan oleh kebenaran yang tidak mencukupi. Jadi cuba log masuk sebagai pentadbir dan lihat sama ada itu menyelesaikan masalah itu. Jika masalah berterusan, anda boleh mencuba penyelesaian berikut: Jalankan Wi-Fi sebagai pentadbir

Penyelesaian kepada ralat segera Windows Update Ralat 0x8024401c Penyelesaian kepada ralat segera Windows Update Ralat 0x8024401c Jun 08, 2024 pm 12:18 PM

Jadual Kandungan Penyelesaian 1 Penyelesaian 21. Padamkan fail sementara Windows Update 2. Membaiki fail sistem yang rosak 3. Lihat dan ubah suai entri pendaftaran 4. Matikan kad rangkaian IPv6 5. Jalankan alat WindowsUpdateTroubleshooter untuk membaiki 6. Matikan firewall dan perisian anti-virus lain yang berkaitan. 7. Tutup perkhidmatan WidowsUpdate. Penyelesaian 3 Penyelesaian 4 Ralat "0x8024401c" berlaku semasa kemas kini Windows pada komputer Huawei Gejala Masalah Punca Penyelesaian Masih tidak diselesaikan? Baru-baru ini, pelayan web perlu dikemas kini kerana kelemahan sistem Selepas log masuk ke pelayan, kemas kini menggesa kod ralat 0x8024401c

Pelayan mengalami ralat, 0x80070003, semasa mencipta mesin maya baharu. Pelayan mengalami ralat, 0x80070003, semasa mencipta mesin maya baharu. Feb 19, 2024 pm 02:30 PM

Jika anda menghadapi kod ralat 0x80070003 semasa menggunakan Hyper-V untuk mencipta atau memulakan mesin maya, ia mungkin disebabkan oleh isu kebenaran, kerosakan fail atau ralat konfigurasi. Penyelesaian termasuk menyemak kebenaran fail, membaiki fail yang rosak, memastikan konfigurasi yang betul dan banyak lagi. Masalah ini boleh diselesaikan dengan menolak kemungkinan yang berbeza satu demi satu. Keseluruhan mesej ralat kelihatan seperti ini: Pelayan mengalami ralat semasa membuat [nama mesin maya]. Tidak dapat mencipta mesin maya baharu. Tidak dapat mengakses stor konfigurasi: Sistem tidak dapat mencari laluan yang ditentukan. (0x80070003). Beberapa kemungkinan punca ralat ini termasuk: Fail mesin maya rosak. Ini boleh berlaku disebabkan oleh serangan perisian hasad, virus atau adware. Walaupun kemungkinan ini berlaku adalah rendah, anda tidak boleh sepenuhnya

Selesaikan ralat kod 0xc000007b Selesaikan ralat kod 0xc000007b Feb 18, 2024 pm 07:34 PM

Kod Penamatan 0xc000007b Semasa menggunakan komputer anda, kadangkala anda menghadapi pelbagai masalah dan kod ralat. Antaranya, kod penamatan adalah yang paling mengganggu terutamanya kod penamatan 0xc000007b. Kod ini menunjukkan bahawa aplikasi tidak boleh dimulakan dengan betul, menyebabkan ketidakselesaan kepada pengguna. Mula-mula, mari kita fahami maksud kod penamatan 0xc000007b. Kod ini ialah kod ralat sistem pengendalian Windows yang biasanya berlaku apabila aplikasi 32-bit cuba dijalankan pada sistem pengendalian 64-bit. Maksudnya sepatutnya

Betulkan Kod Ralat Perintis Kadena-Keesler Betulkan Kod Ralat Perintis Kadena-Keesler Feb 19, 2024 pm 02:20 PM

Jika anda menghadapi ralat Kadena-Keesler semasa bermain Call of Duty: Vanguard, artikel ini mungkin membantu anda. Menurut maklum balas daripada beberapa pemain, permainan ini mempunyai masalah ini pada Windows PC, Xbox, PlayStation dan platform lain. Apabila dicetuskan, anda mungkin menerima mesej ralat berikut: Sambungan gagal Tiada sambungan rangkaian gagal. Anda mesti mempunyai sambungan internet yang aktif untuk bermain dalam talian atau melalui rangkaian tempatan. [Sebab: Kadena-Keesler] Anda juga mungkin menerima mesej ralat berikut: Sambungan gagal Tidak dapat mengakses perkhidmatan dalam talian. [Sebab: Kadena-Keesler] Satu lagi contoh ralat ini pada Xbox adalah seperti berikut: Anda mesti mempunyai sambungan rangkaian yang aktif

Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX Feb 20, 2024 am 10:07 AM

Tajuk: Kaedah dan contoh kod untuk menyelesaikan ralat 403 dalam permintaan AJAX jQuery Ralat 403 merujuk kepada permintaan bahawa pelayan melarang akses kepada sumber Ralat ini biasanya berlaku kerana permintaan itu tidak mempunyai kebenaran atau ditolak oleh pelayan. Apabila membuat permintaan jQueryAJAX, anda kadangkala menghadapi situasi ini Artikel ini akan memperkenalkan cara menyelesaikan masalah ini dan memberikan contoh kod. Penyelesaian: Semak kebenaran: Mula-mula pastikan alamat URL yang diminta adalah betul dan sahkan bahawa anda mempunyai kebenaran yang mencukupi untuk mengakses sumber tersebut.

See all articles