摘要:基于打包動(dòng)態(tài)加載圖片問題直接上代碼動(dòng)態(tài)圖片路徑結(jié)果結(jié)果發(fā)現(xiàn)圖片不顯示,錯(cuò)誤碼為。好了,根據(jù)上述的解決方案,能不能行呢下面對(duì)應(yīng)的試一下方法一源碼方法二源碼結(jié)果好了,經(jīng)過試驗(yàn),可以完美解決問題。
基于 webpack 打包動(dòng)態(tài)加載圖片 src 問題
直接上代碼:
結(jié)果:
結(jié)果發(fā)現(xiàn)圖片不顯示,錯(cuò)誤碼為 404。
報(bào)錯(cuò)的原因:在 webpack 中會(huì)將圖片當(dāng)做模塊來用,比如:[{img:require("./src.jpg")}]因?yàn)槭莿?dòng)態(tài)加載的,所以 url-loader 將無法解析圖片地址。
常見的解決辦法有兩種:
用 require 蔣圖片作為模塊加載,這時(shí)候 webpack 打包時(shí),會(huì)將 require 打包成模塊。
將圖片放到 static 目錄下,但必須寫成絕對(duì)路徑,比如:[{img:"/static/src.jpg"}]。
好了,根據(jù)上述的解決方案,能不能行呢?下面對(duì)應(yīng)的試一下!
方法一:
源碼
方法二:
源碼
結(jié)果:
好了,經(jīng)過試驗(yàn),可以完美解決問題。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/94185.html
摘要:前言本文基于,主要涉及基本概念基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng),常用配置來自于網(wǎng)絡(luò)資源,在文末有相關(guān)參考鏈接,實(shí)踐部分基于自己的項(xiàng)目進(jìn)行優(yōu)化配置。同一文件中,修改某個(gè)影響其他。 前言:本文基于weboack4.x,主要涉及webpack4 基本概念、基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng),常用配置來自于網(wǎng)絡(luò)資源,在文末有相關(guān)參考鏈接,實(shí)踐部分基于自己的項(xiàng)目進(jìn)行...
摘要:入口文件打包出口地址在中可以配置我們的地址這里你要有一個(gè)七牛云的賬戶。特別像是七牛云這樣擁有圖片處理引擎的服務(wù)商,我們還可以通過來處理上傳至的圖片。 本項(xiàng)目源碼均可在 這里 找到。 之前公司的官網(wǎng)項(xiàng)目靜態(tài)文件都是放在靜態(tài)服務(wù)器中,這其中的弊端就不贅述了。簡單說一下 CDN 的好處: CDN 可以解決因分布、帶寬、服務(wù)器性能帶來的訪問延遲問題,適用于站點(diǎn)加速、點(diǎn)播、直播等場景。使用戶可就...
摘要:但由于和技術(shù)過于和復(fù)雜,并沒能得到廣泛的推廣。但是在瀏覽器內(nèi)并不適用。依托模塊化編程,的實(shí)現(xiàn)方式更為簡單清晰,一個(gè)網(wǎng)頁不再是傳統(tǒng)的類似文檔的頁面,而是一個(gè)完整的應(yīng)用程序。到了這里,我們的主角登場了年此處應(yīng)有掌聲。和差不多同期登場的還有。 Github:https://github.com/fenivana/w...webpack 更新到了 4.0,官網(wǎng)還沒有更新文檔。因此把教程更新一下...
摘要:了解相關(guān)什么是是一個(gè)模塊打包器。配置文件默認(rèn)是一個(gè)模塊,返回一個(gè)格式的配置信息對(duì)象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項(xiàng)中指定。 了解Webpack相關(guān) 什么是webpack Webpack是一個(gè)模塊打包器(bundler)。 在Webpack看來, 前端的所有資源文件(js/css/img/less/...)都會(huì)作為模塊處理 它將根據(jù)模塊的依...
摘要:了解相關(guān)什么是是一個(gè)模塊打包器。配置文件默認(rèn)是一個(gè)模塊,返回一個(gè)格式的配置信息對(duì)象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項(xiàng)中指定。 了解Webpack相關(guān) 什么是webpack Webpack是一個(gè)模塊打包器(bundler)。 在Webpack看來, 前端的所有資源文件(js/css/img/less/...)都會(huì)作為模塊處理 它將根據(jù)模塊的依...
閱讀 1399·2021-11-24 09:38
閱讀 3328·2021-11-22 12:03
閱讀 4356·2021-11-11 10:59
閱讀 2431·2021-09-28 09:36
閱讀 1105·2021-09-09 09:32
閱讀 3556·2021-08-05 10:00
閱讀 2621·2021-07-23 15:30
閱讀 3052·2019-08-30 13:12