VUE項目打包（解決背景圖片不顯示問題）
改變路徑配置
將絕對路徑改爲相對路徑
目標文件：項目目錄 > config文件夾 > index.js
assetsPublicPath:'/' 改爲：assetsPublicPath:'./' （加一個點變爲相對路徑）
- 1
配置背景圖片路徑
打包後的css文件夾內app.css文件訪問static/img/’圖片名’路徑錯誤訪問不到圖片，在build文
件內utils.js中配置路徑。
目標文件：項目目錄 > build文件夾 >utils.js
在圖中所示位置添加代碼
publicPath:'../../',
- 1
在命令行中用npm run build 進行打包。
npm run build- 1
生成dist文件
查看
打開dist文件內index.html文件 一切操作正常，則打包完畢
<div class="recommend-box"><div class="recommend-item-box type_blog clearfix" data-report-view="{"mod":"popu_614","dest":"https://blog.csdn.net/qq_37281252/article/details/79442355","strategy":"BlogCommendFromMachineLearnPai2","index":"0"}" data-report-click="{"mod":"popu_614","dest":"https://blog.csdn.net/qq_37281252/article/details/79442355","strategy":"BlogCommendFromMachineLearnPai2","index":"0"}">
<div class="content" style="width: 712px;">
<a href="https://blog.csdn.net/qq_37281252/article/details/79442355" target="_blank" rel="noopener" title="vue項目打包後資源相對引用路徑的和背景圖片路徑問題">
<h4 class="text-truncate oneline" style="width: 552px;">
<em>vue</em><em>項目</em><em>打包</em>後資源相對引用路徑的和<em>背景圖片</em>路徑<em>問題</em> </h4>
<div class="info-box d-flex align-content-center">
<p class="date-and-readNum oneline">
<span class="date hover-show">03-05</span>
<span class="read-num hover-hide">
閱讀數
3931</span>
</p>
</div>
</a>
<p class="content" style="width: 712px;">
<a href="https://blog.csdn.net/qq_37281252/article/details/79442355" target="_blank" rel="noopener" title="vue項目打包後資源相對引用路徑的和背景圖片路徑問題">
<span class="desc oneline">vue項目中若要使用相對路徑來獲得相應靜態資源，需要修改以下內容來確保項目打包後能正常運行。1、修改config=&amp;gt;index.js=&amp;gt;build=&amp;gt;asse...</span>
</a>
<span class="blog_title_box oneline ">
<span class="type-show type-show-blog type-show-after">博文</span>
<a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_37281252">來自： <span class="blog_title"> lyf的博客</span></a>
</span>
</p>
</div>
</div>
解決Vue打包後背景圖片路徑錯誤問題
12-21 閱讀數 1萬+
今天在插入背景圖片過程中，遇到了路徑錯誤的問題，通過網上查詢，找到了解決的辦法，但是大部分都沒有講造成這種問題的原因，故我簡單地總結了一下，並加入了一些自己的理解，歡迎共同探討~ 當用v... 博文 來自： liangxhblog的博客
vue+webpack項目打包後背景圖片加載不出來
10-17 閱讀數 2444
在做VUE+的WebPack腳手架項目打包完成後，在IIS服務器上運行發現項目中的背景圖片加載不出來檢查項目代碼發現是因爲CSS文件中，背景圖片引用的路徑問題;後來通過修改配置文件，問題終於解決了，解... 博文 來自： qq_41725450的博客
css在div塊添加背景圖片爲何不顯示呢？
03-11 閱讀數 2萬+
1，css沒有被調用2，css圖片地址不對3，div的高度沒有固定，是auto或者沒有設值4，div被嵌套，5，div代碼不規範login.html文件style.css文件.header{ back... 博文 來自： Angiexia的專欄
Vue 打包後背景圖片不顯示問題
05-14 閱讀數 2156
如果你是直接打開dist/index.html,需要將config/index.js改爲下面build:{assetsPublicPath:'./'}build/utils.js增加functiong... 博文 來自： 你蠢哭我咯的博客
關於Vue項目打包發佈後CSS中的背景圖片不顯示問題
12-25 閱讀數 470
關於Vue項目打包發佈後CSS中的背景圖片不顯示問題修改build/utils.js中的generateLoaders方法，如下代碼，增加publicPath:'…/…/'//generateload... 博文 來自： a458651114的博客
vue打包後背景圖片不顯示問題
06-06 閱讀數 7640
vue打包後CSS中引用的背景圖片不顯示問題今天在插入背景圖片過程中，遇到了路徑錯誤的問題，通過網上查詢，找到了解決的辦法，但是大部分都沒有講造成這種問題的原因，故我簡單地總結了一下，並加入了一些自己... 博文 來自： just try
Vue項目打包時背景圖片資源路徑錯誤的解決方案
08-15 閱讀數 120
使用項目構建工具webpack或者vue-cli時，打包好的項目放服務器上背景圖片都顯示不出來，控制檯提示資源404notfound,解決辦法如下：在build文件目錄下找到utils.js文件找到如... 博文 來自： 夏爾
vue項目打包後index.html打開空白/背景圖片不顯示
04-17 閱讀數 135
vue項目打包所遇問題一/index.html打開空白在config下的index.js，修改build中的assetsPublicPath:’/'爲assetsPublicPath:"./"如下所示... 博文 來自： YGM01的博客
vuejs項目裏css引用背景圖片不能顯示
09-08 閱讀數 4689
2.解決：build->utils.js裏，修改：增加publicPath:'../../',if(options.extract){returnExtractTextPlugin.extract({... 博文 來自： milli236的博客
<div class="recommend-item-box blog-expert-recommend-box" style="display: block;">
<div class="d-flex">
<div class="blog-expert-recommend">
<div class="blog-expert">
<div class="blog-expert-flexbox" data-report-view="{"mod":"popu_709","dest":"https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"}"><div class="blog-expert-item"><div class="blog-expert-info-box"><div class="blog-expert-img-box" data-report-click="{"mod":"popu_709","dest":"https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"}"><a href="https://blog.csdn.net/qq_37281252" target="_blank"><img src="https://avatar.csdn.net/4/5/3/3_qq_37281252.jpg" alt="iulyf" title="iulyf"></a><span data-report-click="{"mod":"popu_710","dest":"https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"}"><span class="blog-expert-button-follow btn-red-follow" data-name="qq_37281252" data-nick="iulyf">關注</span></span></div><div class="info"><span data-report-click="{"mod":"popu_709","dest":"https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"}"><a href="https://blog.csdn.net/qq_37281252" target="_blank"><h5 class="oneline" title="iulyf">iulyf</h5></a></span> <p></p><p class="article-num" title="39篇文章"> 39篇文章</p><p class="article-num" title="排名:千里之外"> 排名:千里之外</p><p></p></div></div></div><div class="blog-expert-item"><div class="blog-expert-info-box"><div class="blog-expert-img-box" data-report-click="{"mod":"popu_709","dest":"https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"}"><a href="https://blog.csdn.net/liangxhblog" target="_blank"><img src="https://avatar.csdn.net/1/E/B/3_liangxhblog.jpg" alt="liangxhblog" title="liangxhblog"></a><span data-report-click="{"mod":"popu_710","dest":"https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"}"><span class="blog-expert-button-follow btn-red-follow" data-name="liangxhblog" data-nick="liangxhblog">關注</span></span></div><div class="info"><span data-report-click="{"mod":"popu_709","dest":"https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"}"><a href="https://blog.csdn.net/liangxhblog" target="_blank"><h5 class="oneline" title="liangxhblog">liangxhblog</h5></a></span> <p></p><p class="article-num" title="39篇文章"> 39篇文章</p><p class="article-num" title="排名:千里之外"> 排名:千里之外</p><p></p></div></div></div><div class="blog-expert-item"><div class="blog-expert-info-box"><div class="blog-expert-img-box" data-report-click="{"mod":"popu_709","dest":"https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"}"><a href="https://blog.csdn.net/qq_41725450" target="_blank"><img src="https://avatar.csdn.net/1/D/9/3_qq_41725450.jpg" alt="一捆鐵樹枝" title="一捆鐵樹枝"></a><span data-report-click="{"mod":"popu_710","dest":"https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"}"><span class="blog-expert-button-follow btn-red-follow" data-name="qq_41725450" data-nick="一捆鐵樹枝">關注</span></span></div><div class="info"><span data-report-click="{"mod":"popu_709","dest":"https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"}"><a href="https://blog.csdn.net/qq_41725450" target="_blank"><h5 class="oneline" title="一捆鐵樹枝">一捆鐵樹枝</h5></a></span> <p></p><p class="article-num" title="61篇文章"> 61篇文章</p><p class="article-num" title="排名:千里之外"> 排名:千里之外</p><p></p></div></div></div><div class="blog-expert-item"><div class="blog-expert-info-box"><div class="blog-expert-img-box" data-report-click="{"mod":"popu_709","dest":"https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"}"><a href="https://blog.csdn.net/Angiexia" target="_blank"><img src="https://avatar.csdn.net/7/C/9/3_angiexia.jpg" alt="提拉米蘇x" title="提拉米蘇x"></a><span data-report-click="{"mod":"popu_710","dest":"https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"}"><span class="blog-expert-button-follow btn-red-follow" data-name="Angiexia" data-nick="提拉米蘇x">關注</span></span></div><div class="info"><span data-report-click="{"mod":"popu_709","dest":"https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"}"><a href="https://blog.csdn.net/Angiexia" target="_blank"><h5 class="oneline" title="提拉米蘇x">提拉米蘇x</h5></a></span> <p></p><p class="article-num" title="185篇文章"> 185篇文章</p><p class="article-num" title="排名:千里之外"> 排名:千里之外</p><p></p></div></div></div></div>
</div>
</div>
</div>
</div><div class="recommend-item-box baiduSearch recommend-box-ident" data-report-view="{"mod":"popu_614","dest":"https://blog.csdn.net/Dg_Zing/article/details/87909582","strategy":"searchFromBaidu1","index":"3"}" data-report-click="{"mod":"popu_614","dest":"https://blog.csdn.net/Dg_Zing/article/details/87909582","strategy":"searchFromBaidu1","index":"3"}" data-track-view="{"mod":"popu_614","dest":"https://blog.csdn.net/Dg_Zing/article/details/87909582","strategy":"searchFromBaidu1","index":2,"extend1":"_"}" data-track-click="{"mod":"popu_614","dest":"https://blog.csdn.net/Dg_Zing/article/details/87909582","strategy":"searchFromBaidu1","index":2,"extend1":"_"}" data-flg="true"> <a href="https://blog.csdn.net/Dg_Zing/article/details/87909582" target="_blank"> <h4 class="text-truncate oneline" style="width: 634px;"><em>vue</em><em>項目</em><em>打包</em>後css<em>背景圖片</em>無法<em>顯示</em><em>問題</em> - Arlisol的博客 - CSDN博客</h4> <div class="info-box d-flex align-content-center"> <p> <span class="date">5-30</span> </p> </div> </a> </div><div class="recommend-item-box baiduSearch recommend-box-ident" data-report-view="{"mod":"popu_614","dest":"https://blog.csdn.net/a458651114/article/details/85245245","strategy":"searchFromBaidu1","index":"4"}" data-report-click="{"mod":"popu_614","dest":"https://blog.csdn.net/a458651114/article/details/85245245","strategy":"searchFromBaidu1","index":"4"}" data-track-view="{"mod":"popu_614","dest":"https://blog.csdn.net/a458651114/article/details/85245245","strategy":"searchFromBaidu1","index":3,"extend1":"_"}" data-track-click="{"mod":"popu_614","dest":"https://blog.csdn.net/a458651114/article/details/85245245","strategy":"searchFromBaidu1","index":3,"extend1":"_"}" data-flg="true"> <a href="https://blog.csdn.net/a458651114/article/details/85245245" target="_blank"> <h4 class="text-truncate oneline" style="width: 634px;">關於<em>Vue</em><em>項目</em><em>打包</em>發佈後CSS中的<em>背景圖片</em>不<em>顯示</em><em>問題</em> - a4..._CSDN博客</h4> <div class="info-box d-flex align-content-center"> <p> <span class="date">1-21</span> </p> </div> </a> </div>
vue學習筆記一：vue項目中設置背景圖片
04-09 閱讀數 8518
這幾天在用vue開發一個項目，真的是到處都是坑啊，就連設置圖片背景，也和前面用的不一樣了，編譯打包後，配置到服務器上時，由於路徑解析的問題，圖片並不能夠正確的顯示出來，background:url(&... 博文 來自： Fiona_lms的博客
vue動態切換背景圖片background
04-12 閱讀數 4422
html:&lt;divclass="notice"&gt;&lt;divclass="notice-t"&gt;&lt... 博文 來自： Haines
vue 中用less 解決背景圖片根據屏幕選擇問題
10-07 閱讀數 2039
.bg-image(@url){background-image:url('@{url}@2x.png');@media(-webkit-min-device-pixel-ratio:3),(min-... 博文 來自： fgg9655的博客
vue項目webpack打包後找不到靜態資源、圖片，報404問題
06-26 閱讀數 3448
修改vue-cli腳手架生成的build文件夾下的utils.js的publicPath:'../../'if(options.extract){returnExtractTextPlugin.ext... 博文 來自： lyn1772671980的博客
vue項目打包後css背景圖片無法顯示問題
02-24 閱讀數 587
博主在測試打包項目時發現自己使用的404頁面的背景圖片無法顯示，經過之前的問題，基本推斷又是路徑問題。在搜索引擎一番查找後發現果然是路徑的問題，因爲打包後的css文件在static文件夾下的css文件... 博文 來自： Arlisol的博客
【Vue】vue-cli構建build時背景圖片路徑問題
10-04 閱讀數 187
在sass中引入設置背景圖片，引起的路徑錯誤，或者build構建後無法顯示問題，可以在webpack.base.config.js中設置publicPath；... 博文 來自： Jayant89的博客
Vue工程打包部署到服務器後，靜態文件（圖片）不顯示
09-29 閱讀數 4692
問題描述：在自己工程裏打開Powershell窗口，運行npmrundev在本地瀏覽器打開http://localhost:8080/index.html------工程運行良好！但是npmrunbu... 博文 來自： julystroy的博客
關於vue打包後圖片路徑找不到的問題
08-07 閱讀數 1185
//asserts引入的靜態資源是相對路徑//而static引入靜態資源時必須是絕對路徑slides:[{//當asserts引入動態綁定的靜態資源時，需要以模塊的方式導入資源，//將圖片作爲模塊加載... 博文 來自： weixin_30479905的博客
vue 發佈後找不到圖片等靜態資源
01-31 閱讀數 1761
在config/index.js中，將assetsPublicPath後面的“/”加個點就好了。原因：build.assetsPublicPath是資源的根目錄這個是通過http服務器運行的url路徑... 博文 來自： mannix_lei的博客
Vue 打包，放到服務器的問題 總結
03-06 閱讀數 1萬+
Failedtoloadresource:net::ERR_FILE_NOT_FOUND或者vuedist文件下的index.html沒顯示vue-clinpmrundev可以看到，但是通過dist文... 博文 來自： lhb_11的博客
vue項目打包後打開空白解決辦法
09-22 閱讀數 3萬+
vue+webpack+HBulider打包後手機上一片空白解決辦法網上很多說自己的VUE項目通過Webpack打包生成的list文件，放到HBulider打包後，通過手機打開一片空白。這個主要原因是... 博文 來自： 羞羞的鐵拳
vue打包後，圖片不顯示，img路徑404
10-11 閱讀數 4700
vue打包好的文件，訪問時顯示背景圖片沒有找到遇到的問題：開發時圖片好好的，打包後，圖片不顯示，如下圖，轉盤背景圖沒有了：首先，說一下項目裏圖片引入的三種方式：在頁面中，通過img標籤的src=&am... 博文 來自： rainbow8300的博客
Vue -- Vue打包後背景圖片路徑錯誤
06-26 閱讀數 513
Vue項目中使用圖片的方法有如下幾種：1、圖片資源放在assets-&amp;gt;imgs文件夾下面①img標籤引入圖片&amp;lt;imgsrc=&quot;../ass... 博文 來自： bobobocai的博客
vue項目打包後，npm run build相關配置，以及解決項目打包後，圖片404，背景圖片找不到，iview代碼出問題的情況
07-30 閱讀數 3749
1.首先找到config下的index.js文件將build下的assetsPublicPath的斜槓換成./操作如下只需要換build中的就可以dev中的assetsPublicPath不用動不然打... 博文 來自： 李小樂er
當Vue中img的src是動態渲染時不顯示問題（小白易坑）
07-09 閱讀數 1萬+
---------------&gt;&gt;最近遇見動態渲染img時，想起了當初剛開始寫vue時，曾經遇見的一個小小坑。Vue中：img的src屬性是動態渲染時不顯示問題1.需求：展... 博文 來自： 水稻南曦jsnancy的博客
基於 Vue.js 2.0 酷炫自適應背景視頻登錄頁面的設計
01-17 閱讀數 7256
本文講述如何實現擁有酷炫背景視頻的登錄頁面，瀏覽器窗口隨意拉伸，背景視頻及前景登錄組件均能完美適配，背景視頻可始終鋪滿窗口，前景組件始終居中，視頻的內容始終得到最大限度的保留，可以得到最好的視覺效果。... 博文 來自： 雪中亮
【Vue】Vue移動端頁面自適應解決方案
02-07 閱讀數 1萬+
移動端頁面自適應解決方案該方案使用相當簡單，把下面這段已壓縮過的原生JS（僅1kb，源碼已在文章底部更新，2017/5/3）放到HTML的head標籤中即可（注:不要手動設置viewport，該方案自... 博文 來自： 時間飛逝的博客
關於圖片不變形適應屏幕的解決方法（vue爲例）
05-04 閱讀數 9099
（此處背景圖寬：高=1.92）1.在html中設置兩種可選擇的類：&lt;divclass="login-container"v-bind:class="[{'c... 博文 來自： Jenny_ttw的博客
vue的style方式綁定行內樣式-background-image的方式等~
01-19 閱讀數 3萬+
問題：使用vue加載圖片變量，爲了圖片的自適應，需設置爲背景圖居中排布<trv-for="(item,index)indataObj"><tdclass="video-msg"v-b... 博文 來自： Baby_加油_的博客
HTML5 body設置全屏背景圖片 如何讓body的背景圖片自適應整個屏----實戰經驗
07-20 閱讀數 14萬+
用什麼代碼實現？不允許有白色底色產生，因爲手機高度不一樣錯誤的寫法：加到div中結合圖片設置min-height，但是頁面不會回彈話不多說直接上代碼終極方案html,body{width:100%;h... 博文 來自： 願你走過半生，歸來任是少年。
vue打包後CSS中引用的背景圖片不顯示問題
11-15 閱讀數 6517
vue項目中，在css樣式中引用了一張背景圖片，開發環境下是可以正常顯示，build之後背景圖片不顯示。解決方法：找到build/utils.js文件修改成爲如下所示內容：添加紅框中的內容即可。... 博文 來自： 小聖賢君的博客
vue打包之後靜態資源圖片失效問題
04-13 閱讀數 3萬+
1.問題描述在項目開發中,當我們通過npmrunbuild打包之後將文件放在服務器上時通常會出現圖片失效問題,控制檯中提示某個圖片沒有找到（404錯誤），這些圖片可以是以src引入的圖片，也可以是cs... 博文 來自： 紙上得來終覺淺，絕知此事要躬行
關於Vue背景圖打包之後訪問路徑錯誤問題
03-22 閱讀數 1萬+
通過vue-cli腳手架創建的vue項目中，背景圖片打包之後路徑訪問錯誤。導致該問題的原因：是url-loader的匹配路徑。解決方案1：設爲img標籤；解決方案2：修改limit值；解決方案3：cs... 博文 來自： 黑黑黑客兒
vue 項目打包時樣式及背景圖片路徑找不到
09-07 閱讀數 7866
問題描述：vue項目打包後，文件找得到，但是引用的字體及背景圖片找不到；解決方法：... 博文 來自： github_38469586的博客
<div class="recommend-item-box type_hot_word">
<div class="content clearfix" style="width: 712px;">
<div class="float-left">
<span>
<a href="https://www.csdn.net/gather_1c/NtjaAg1sLWRvd25sb2Fk.html" target="_blank">
c#1如何搞成01</a>
</span>
<span>
<a href="https://www.csdn.net/gather_14/NtjaAg2sLWRvd25sb2Fk.html" target="_blank">
c# 系統托盤圖標</a>
</span>
<span>
<a href="https://www.csdn.net/gather_1d/NtjaAg3sLWRvd25sb2Fk.html" target="_blank">
c# 鍵值對 鍵可以重複</a>
</span>
<span>
<a href="https://www.csdn.net/gather_19/NtjaAg4sLWRvd25sb2Fk.html" target="_blank">
c#把負數轉整形</a>
</span>
<span>
<a href="https://www.csdn.net/gather_1d/NtjaAg5sLWRvd25sb2Fk.html" target="_blank">
c# 鼠標移上去提示</a>
</span>
<span>
<a href="https://www.csdn.net/gather_10/NtjaEgwsLWRvd25sb2Fk.html" target="_blank">
c#結構體定義</a>
</span>
<span>
<a href="https://www.csdn.net/gather_18/NtjaEgxsLWRvd25sb2Fk.html" target="_blank">
使用c#編寫一個透明窗體</a>
</span>
<span>
<a href="https://www.csdn.net/gather_1f/NtjaEgysLWRvd25sb2Fk.html" target="_blank">
api 餓了麼c#</a>
</span>
<span>
<a href="https://www.csdn.net/gather_1f/NtjaEgzsLWRvd25sb2Fk.html" target="_blank">
c# 根據網絡定位</a>
</span>
<span>
<a href="https://www.csdn.net/gather_18/NtjaEg0sLWRvd25sb2Fk.html" target="_blank">
c# 清除html標籤</a>
</span>
</div>
</div>
</div>
<div class="recommend-loading-box">
<img src="https://csdnimg.cn/release/phoenix/images/feedLoading.gif">
</div>
<div class="recommend-end-box">
<p class="text-center">沒有更多推薦了，<a href="https://blog.csdn.net/" class="c-blue c-blue-hover c-blue-focus">返回首頁</a></p>
</div>
</div>
<div class="template-box">
<span>©️2019 CSDN</span><span class="point"></span>
<span>皮膚主題: <a href="https://blog.csdn.net/guitarist0505" target="_blank" style="color:#3399ea">skin-blackboard</a></span>
<span> 設計師:
CSDN官方博客 </span>
</div>
<div id="reward" class="reward-box" style="top: 21px; left: -122px;">
<p class="rewad-title">打賞<span class="reward-close"><svg t="1567152543821" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10924" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12"><defs><style type="text/css"></style></defs><path d="M512 438.378667L806.506667 143.893333a52.032 52.032 0 1 1 73.6 73.621334L585.621333 512l294.485334 294.485333a52.074667 52.074667 0 0 1-73.6 73.642667L512 585.621333 217.514667 880.128a52.053333 52.053333 0 1 1-73.621334-73.642667L438.378667 512 143.893333 217.514667a52.053333 52.053333 0 1 1 73.621334-73.621334L512 438.378667z" fill="" p-id="10925"></path></svg></span></p>
<dl>
<dd><a href="javascript:;"><img src="https://avatar.csdn.net/5/E/5/3_qq_34611721.jpg" alt=""></a></dd>
<dt>
<p class="blog-name">小嘜的前端寶庫</p>
<p class="blog-discript">“你的鼓勵將是我創作的最大動力”</p>
</dt>
</dl>
<div class="money-box">
<span class="choosed choose_money" data-id="5">5C幣</span>
<span class="choose_money" data-id="10">10C幣</span>
<span class="choose_money" data-id="20">20C幣</span>
<span class="choose_money" data-id="50">50C幣</span>
<span class="choose_money" data-id="100">100C幣</span>
<span class="choose_money" data-id="200">200C幣</span>
</div>
<div class="sure-box">
<p class="is-have-money"><a class="reward-sure">確定</a></p>
</div>
</main>