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

233jl 發(fā)布于2019-08-22 16:15 / 2082人閱讀

摘要：基于打包動態(tài)加載圖片問題直接上代碼動態(tài)圖片路徑結果結果發(fā)現(xiàn)圖片不顯示，錯誤碼為。好了，根據(jù)上述的解決方案，能不能行呢下面對應的試一下方法一源碼方法二源碼結果好了，經(jīng)過試驗，可以完美解決問題。

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

直接上代碼：

結果：

結果發(fā)現(xiàn)圖片不顯示，錯誤碼為 404。

報錯的原因：在 webpack 中會將圖片當做模塊來用，比如：[{img:require("./src.jpg")}]因為是動態(tài)加載的，所以 url-loader 將無法解析圖片地址。

常見的解決辦法有兩種：

用 require 蔣圖片作為模塊加載，這時候 webpack 打包時，會將 require 打包成模塊。

將圖片放到 static 目錄下，但必須寫成絕對路徑，比如：[{img:"/static/src.jpg"}]。

好了，根據(jù)上述的解決方案，能不能行呢？下面對應的試一下！

方法一：

源碼

方法二：

源碼

結果：

好了，經(jīng)過試驗，可以完美解決問題。

GPU云服務器云服務器 js數(shù)組動態(tài)加載圖片 Webpack打包分塊 webpack按需加載 html圖片src

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/94185.html

webpack 基礎與項目優(yōu)化實踐總結

摘要：前言本文基于，主要涉及基本概念基本配置和實際項目打包優(yōu)化。關于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡資源，在文末有相關參考鏈接，實踐部分基于自己的項目進行優(yōu)化配置。同一文件中，修改某個影響其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實際項目打包優(yōu)化。關于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡資源，在文末有相關參考鏈接，實踐部分基于自己的項目進行...

Scorpion 2019-08-23 18:15 評論0 收藏0
Webpack 項目優(yōu)化雜記

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

incredible 2019-08-23 13:53 評論0 收藏0
Webpack 4 和單頁應用入門

摘要：但由于和技術過于和復雜，并沒能得到廣泛的推廣。但是在瀏覽器內并不適用。依托模塊化編程，的實現(xiàn)方式更為簡單清晰，一個網(wǎng)頁不再是傳統(tǒng)的類似文檔的頁面，而是一個完整的應用程序。到了這里，我們的主角登場了年此處應有掌聲。和差不多同期登場的還有。 Github：https://github.com/fenivana/w...webpack 更新到了 4.0，官網(wǎng)還沒有更新文檔。因此把教程更新一下...

Zoom 2019-08-21 11:23 評論0 收藏0
Webpack快速入門

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

laznrbfe 2019-08-20 18:13 評論0 收藏0
Webpack快速入門

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

curried 2019-08-29 12:58 評論0 收藏0