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