在vue中给图片添加路径试过三种方式:

1.在css的background中添加路径;

2.将路径写在data属性中,然后动态注入img标签的src属性;

3.在img标签中奖src属性写死

第三种方式会报错!第三种方式会报错!第三种方式会报错!

因为打包的时候必须写以当前组件为参照的相对路径,否则打包回报错说找不到;但是打包完打开页面,img的路径还是打包时的相对路径,但此时已经设置了publicPath,最终结果是pubilcPath+相对路径,导致404错误。

第一种方式,作为css背景图片,路径应该写相对于当前组件的路径;

第二种方式,作为字符串变量动态注入给img的:src属性,路径应该写相对于当前页面的路径。

  比如img标签在index.html中,而图片在index同级的src文件夹的img子文件夹中,应该写'./src/img/xxx.jpg'

还有第三种方式是,仍然把img的src作为data属性中的变量,但此时写成下面的形式:

1 data(){
2 return{
3 img:require(/path/to/img)
4 }
5 }

require(/path/to/img)   中  require里面是图片相对于组件的相对路径。

webpack+vue img的src问题的更多相关文章

  1. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  2. Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?

    现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...

  3. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  4. gulp+webpack+vue

    gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleR ...

  5. webpack + vue最佳实践

    webpack + vue最佳实践 我的原文地址:http://www.xiaoniuzai.cn/2016/10/04/webpack%20+%20vue%E6%9C%80%E4%BD%B3%E5% ...

  6. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  7. webpack + vue

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.ES6语法 前言 在对着产品高举中指怒发心中之愤后,真正能够解 ...

  8. [Vue] karme/jasmine/webpack/vue搭建测试环境

    karma 和 jasmine karma 是 google 开源的一个基于 Node.js 的 JavaScript 前端测试运行框架,前身叫 Testacular. jasmine 是一个 jav ...

  9. webpack+vue+vueRouter模块化构建完整项目实例详细步骤-入门篇

    新建项目 开始(确认已经安装node环境和npm包管理工具) 1.新建项目文件名为start_vuedemo 2.npm init -y 初始化项目,我的win7系统,工程在d盘的vue_test_p ...

随机推荐

  1. 杂园日记-获取URL参数

    function getUrlParams(name, url){ var locationUrl = window.location.search; if(url){ var s =url.inde ...

  2. PHP--关于上传文件大小的问题

    参考:https://www.cnblogs.com/jianqingwang/p/5863960.html https://blog.csdn.net/u013168253/article/deta ...

  3. Apache漏洞利用与安全加固实例分析

    Apache 作为Web应用的载体,一旦出现安全问题,那么运行在其上的Web应用的安全也无法得到保障,所以,研究Apache的漏洞与安全性非常有意义.本文将结合实例来谈谈针对Apache的漏洞利用和安 ...

  4. python学习20之面向对象编程高级

    '''''''''1.动态绑定:对于一个类,我们可以对它的实例动态绑定新的属性或方法.为了使所有的实例均可以使用动态绑定的属性和方法,我们也可以采用对类直接动态绑定'''class Student() ...

  5. VC++ QT 数组的初始化

    数组有时会初始化为0. 但加了一个 QThread 的派生类对象之后,数组就不再被初始化为0了. 所以对于数组还是要手动初始化,否则可能产生无法预料的现象.

  6. 数据结构--栈(附上STL栈)

    定义: 栈是一种只能在某一端插入和删除数据的特殊线性表.他按照先进先出的原则存储数据,先进的数据被压入栈底,最后进入的数据在栈顶,需要读数据的时候从栈顶开始弹出数据(最后被压入栈的,最先弹出).因此栈 ...

  7. USB设备驱动模型

    嵌入式设备驱动的编写,基本上都要按照一定的驱动模型编写.不这么做的话,一旦设备发生了更新和改变,大部分的驱动代码都要推倒重来,代码的重用率低,不具备移植性.所以在新版linux2.6.22以后的内核版 ...

  8. cookie、session 和 token 区别

    1.什么是 cookie cookie 是保存在本地终端的数据.cookie 由服务器生成,发送给浏览器,浏览器把 cookie 以 kv 形式保存到某个目录下的文本文件内,下一次请求同一网站时会把该 ...

  9. Effective C++学习记录

    Effective C++算是看完了,但是并没有完全理解,也做不到记住所有,在此记录下55个条款及条款末的"请记住". 让自己习惯C++ 条款01:视C++为一个语言联邦 ① C ...

  10. 初次认识Ngnix

    这几天写那个HTTPD,最后觉得学到的好像很少,而且就算最后运行成功了好像也没有什么.所以想学习一些生活中真正在运用着的web服务器, 上网查询了些资料了解到apache, lighttpd, ngi ...