在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. php环境兼容性问题---压缩格式及其配置简介

    php环境兼容性问题-- 内容编码错误 无法显示您尝试查看的页面,因为它使用了无效或者不支持的压缩格式. 请联系网站的所有者以告知此问题. 以前也遇到过同样的问题,记得是PHP代码ob_start(' ...

  2. 理解分布式一致性:Paxos协议之Cheap Paxos & Fast Paxos

    理解分布式一致性:Paxos协议之Cheap Paxos & Fast Paxos Cheap Paxos Message flow: Cheap Multi-Paxos Fast Paxos ...

  3. js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  4. 【JAVA基础】06 面向对象

    1. 面向对象思想概述 面向过程思想概述 第一步 第二步 面向对象思想概述 找对象(第一步,第二步) 举例 买煎饼果子 洗衣服 面向对象思想特点 是一种更符合我们思想习惯的思想 可以将复杂的事情简单化 ...

  5. bdc抢夺域控

    1.运行CMD2.在 ntdsutil :提示符下输入 ntdsutil3.在 ntdsutil :提示符下输入 roles4.在 fsmo maintenance:提示符下输入 connection ...

  6. Vs Code在Vue项目中v-for指令提示错误的解决办法

    最近在做一个Vue项目,在其中用到v-for指令时,发现Vs Code报错,如下图(代码是没有任何问题的),在网上找了一下解决办法,希望能帮助到更多人. 解决方法: 打开    文件-首选项-设置 将 ...

  7. Merge_Sort

    public class Merge_Sort { public static void merge(int a[],int n){ int source; //合并之前数组的大小 int targe ...

  8. 初学dp心得

    从STL到贪心,再到现在的动态规划,可以说动态规划真的让我学的有点蒙,对于一些题目,会做,但是不会用DP,现在还不能熟练的写出状态转移方程,更重要的是,自己宛如一个哺乳期的小孩,做题需要套模板,没有模 ...

  9. P2290 [HNOI2004]树的计数(bzoj1211)

    洛谷P2290 [HNOI2004]树的计数 bzoj1211 [HNOI2004]树的计数 Description 一个有\(n\)个结点的树,设它的结点分别为\(v_1,v_2,\cdots, v ...

  10. 一只简单的网络爬虫(基于linux C/C++)————socket相关及HTTP

    socket相关 建立连接 网络通信中少不了socket,该爬虫没有使用现成的一些库,而是自己封装了socket的相关操作,因为爬虫属于客户端,建立套接字和发起连接都封装在build_connect中 ...