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.youkuaiyun.com/qq_37281252/article/details/79442355","strategy":"BlogCommendFromMachineLearnPai2","index":"0"}" data-report-click="{"mod":"popu_614","dest":"https://blog.youkuaiyun.com/qq_37281252/article/details/79442355","strategy":"BlogCommendFromMachineLearnPai2","index":"0"}">
<div class="content" style="width: 712px;">
<a href="https://blog.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/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打包前路径调整
09-16 阅读数 271
https://blog.youkuaiyun.com/qq_34611721/article/details/80996947 博文 来自: 代码青春
关于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.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/qq_37281252" target="_blank"><img src="https://avatar.youkuaiyun.com/4/5/3/3_qq_37281252.jpg" alt="iulyf" title="iulyf"></a><span data-report-click="{"mod":"popu_710","dest":"https://blog.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/liangxhblog" target="_blank"><img src="https://avatar.youkuaiyun.com/1/E/B/3_liangxhblog.jpg" alt="liangxhblog" title="liangxhblog"></a><span data-report-click="{"mod":"popu_710","dest":"https://blog.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/qq_41725450" target="_blank"><img src="https://avatar.youkuaiyun.com/1/D/9/3_qq_41725450.jpg" alt="一捆铁树枝" title="一捆铁树枝"></a><span data-report-click="{"mod":"popu_710","dest":"https://blog.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/Angiexia" target="_blank"><img src="https://avatar.youkuaiyun.com/7/C/9/3_angiexia.jpg" alt="提拉米苏x" title="提拉米苏x"></a><span data-report-click="{"mod":"popu_710","dest":"https://blog.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/Dg_Zing/article/details/87909582","strategy":"searchFromBaidu1","index":"3"}" data-report-click="{"mod":"popu_614","dest":"https://blog.youkuaiyun.com/Dg_Zing/article/details/87909582","strategy":"searchFromBaidu1","index":"3"}" data-track-view="{"mod":"popu_614","dest":"https://blog.youkuaiyun.com/Dg_Zing/article/details/87909582","strategy":"searchFromBaidu1","index":2,"extend1":"_"}" data-track-click="{"mod":"popu_614","dest":"https://blog.youkuaiyun.com/Dg_Zing/article/details/87909582","strategy":"searchFromBaidu1","index":2,"extend1":"_"}" data-flg="true"> <a href="https://blog.youkuaiyun.com/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的博客 - 优快云博客</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.youkuaiyun.com/a458651114/article/details/85245245","strategy":"searchFromBaidu1","index":"4"}" data-report-click="{"mod":"popu_614","dest":"https://blog.youkuaiyun.com/a458651114/article/details/85245245","strategy":"searchFromBaidu1","index":"4"}" data-track-view="{"mod":"popu_614","dest":"https://blog.youkuaiyun.com/a458651114/article/details/85245245","strategy":"searchFromBaidu1","index":3,"extend1":"_"}" data-track-click="{"mod":"popu_614","dest":"https://blog.youkuaiyun.com/a458651114/article/details/85245245","strategy":"searchFromBaidu1","index":3,"extend1":"_"}" data-flg="true"> <a href="https://blog.youkuaiyun.com/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..._优快云博客</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.youkuaiyun.com/gather_1c/NtjaAg1sLWRvd25sb2Fk.html" target="_blank">
c#1如何搞成01</a>
</span>
<span>
<a href="https://www.youkuaiyun.com/gather_14/NtjaAg2sLWRvd25sb2Fk.html" target="_blank">
c# 系统托盘图标</a>
</span>
<span>
<a href="https://www.youkuaiyun.com/gather_1d/NtjaAg3sLWRvd25sb2Fk.html" target="_blank">
c# 键值对 键可以重复</a>
</span>
<span>
<a href="https://www.youkuaiyun.com/gather_19/NtjaAg4sLWRvd25sb2Fk.html" target="_blank">
c#把负数转整形</a>
</span>
<span>
<a href="https://www.youkuaiyun.com/gather_1d/NtjaAg5sLWRvd25sb2Fk.html" target="_blank">
c# 鼠标移上去提示</a>
</span>
<span>
<a href="https://www.youkuaiyun.com/gather_10/NtjaEgwsLWRvd25sb2Fk.html" target="_blank">
c#结构体定义</a>
</span>
<span>
<a href="https://www.youkuaiyun.com/gather_18/NtjaEgxsLWRvd25sb2Fk.html" target="_blank">
使用c#编写一个透明窗体</a>
</span>
<span>
<a href="https://www.youkuaiyun.com/gather_1f/NtjaEgysLWRvd25sb2Fk.html" target="_blank">
api 饿了么c#</a>
</span>
<span>
<a href="https://www.youkuaiyun.com/gather_1f/NtjaEgzsLWRvd25sb2Fk.html" target="_blank">
c# 根据网络定位</a>
</span>
<span>
<a href="https://www.youkuaiyun.com/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.youkuaiyun.com/" class="c-blue c-blue-hover c-blue-focus">返回首页</a></p>
</div>
</div>
<div class="template-box">
<span>©️2019 优快云</span><span class="point"></span>
<span>皮肤主题: <a href="https://blog.youkuaiyun.com/guitarist0505" target="_blank" style="color:#3399ea">skin-blackboard</a></span>
<span> 设计师:
优快云官方博客 </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.youkuaiyun.com/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>