成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

基于 webpack 打包動(dòng)態(tài)加載圖片 src 問題

233jl / 2128人閱讀

摘要:基于打包動(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

相關(guān)文章

  • webpack 基礎(chǔ)與項(xiàng)目優(yōu)化實(shí)踐總結(jié)

    摘要:前言本文基于,主要涉及基本概念基本配置和實(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)行...

    Scorpion 評(píng)論0 收藏0
  • Webpack 項(xiàng)目優(yōu)化雜記

    摘要:入口文件打包出口地址在中可以配置我們的地址這里你要有一個(gè)七牛云的賬戶。特別像是七牛云這樣擁有圖片處理引擎的服務(wù)商,我們還可以通過來處理上傳至的圖片。 本項(xiàng)目源碼均可在 這里 找到。 之前公司的官網(wǎng)項(xiàng)目靜態(tài)文件都是放在靜態(tài)服務(wù)器中,這其中的弊端就不贅述了。簡單說一下 CDN 的好處: CDN 可以解決因分布、帶寬、服務(wù)器性能帶來的訪問延遲問題,適用于站點(diǎn)加速、點(diǎn)播、直播等場景。使用戶可就...

    incredible 評(píng)論0 收藏0
  • Webpack 4 和單頁應(yīng)用入門

    摘要:但由于和技術(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)還沒有更新文檔。因此把教程更新一下...

    Zoom 評(píng)論0 收藏0
  • Webpack快速入門

    摘要:了解相關(guān)什么是是一個(gè)模塊打包器。配置文件默認(rèn)是一個(gè)模塊,返回一個(gè)格式的配置信息對(duì)象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項(xiàng)中指定。 了解Webpack相關(guān) 什么是webpack Webpack是一個(gè)模塊打包器(bundler)。 在Webpack看來, 前端的所有資源文件(js/css/img/less/...)都會(huì)作為模塊處理 它將根據(jù)模塊的依...

    laznrbfe 評(píng)論0 收藏0
  • Webpack快速入門

    摘要:了解相關(guān)什么是是一個(gè)模塊打包器。配置文件默認(rèn)是一個(gè)模塊,返回一個(gè)格式的配置信息對(duì)象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項(xiàng)中指定。 了解Webpack相關(guān) 什么是webpack Webpack是一個(gè)模塊打包器(bundler)。 在Webpack看來, 前端的所有資源文件(js/css/img/less/...)都會(huì)作為模塊處理 它將根據(jù)模塊的依...

    curried 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<