vue的图片路径，和背景图片路径打包后错误解决

叁歲伎倆 2022-01-16 16:35 269阅读 0赞

最近在研究vue，老实的按照官网提供的，搭建的了 webpack+vue+vuex+vue-router，，因为是自己搭建的，所以踩了不少坑，一般问题百度都有，这个背景图片的问题，查了很久才解决。

1、找到 config->index.js里面，如下修改

![1075904-20171211155335430-933027991.png][]

2、找到 build->utils.js,在里面加入一句publicPath:'../../',

![1075904-20171211155620305-1639102172.png][]

配置修改完成，接下来，使用有两种方式，这里一般和文件结构有关，下面是我的文件结构下的使用

![1075904-20171214172412560-1772528814.png][]

1、图片资源放在 assets->img文件夹下面

img标签引入图片

css使用图片

2、图片资源放在static->img文件夹下面

img标签引入图片

<table> 
 <tbody style="background:none;border:0px;line-height:1.1em;vertical-align:baseline;min-height:auto;"> 
  <tr style="background:none;border:0px;line-height:1.1em;vertical-align:baseline;min-height:auto;"> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;background:none;line-height:1.1em;vertical-align:baseline;min-height:auto;color:rgb(175,175,175);"> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      1 
    </div></td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;background:none;line-height:1.1em;vertical-align:baseline;min-height:auto;"> 
    <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
     <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">&lt;img src=</code> 
     <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:#0000FF;">"../../static/img/loginback.png"</code>&nbsp; 
     <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,255);">class</code> 
     <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">=</code> 
     <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:#0000FF;">"test-img"</code>&nbsp; 
     <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">/&gt;&lt;br&gt;&lt;img src=</code> 
     <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:#0000FF;">"static/img/loginback.png"</code>&nbsp; 
     <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,255);">class</code> 
     <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">=</code> 
     <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:#0000FF;">"test-img"</code>&nbsp; 
     <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">/&gt;</code> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

css使用图片

原地址:https://www.cnblogs.com/muamaker/p/8023522.html

转载于:https://blog.51cto.com/12907581/2151362

[1075904-20171211155335430-933027991.png]: /images/20220114/4bff23a3051d4d78880e1f061b416996.png
[1075904-20171211155620305-1639102172.png]: /images/20220114/96f7caef47d649938cee13c38791e90a.png
[1075904-20171214172412560-1772528814.png]: /images/20220114/0e2d55722a6f4e3ab64a6d2982e5af12.png