1 本地图片动态绑定img的src属性

一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的

我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意~

但是我们这时候可能会有个需求就是我们要动态绑定一组本地图片

1 将图片当成模块先引进来,再绑定

但是这种做法局限性比较大,模块化差,代码不好看 。

如果我做的是纯静态的网站展示,有许多的本地静态资源需要加载,里面包括本地数据和本地图片混合的好几组,那不是要麻烦死~

1.1 所以我们需要三步

第一步我们在src下面建立一个json文件夹里面放置静态的json数据

第二步将所有的静态图片资源放在和src同级目录下的static文件夹下

第三步你的路径可以写成自然的'../../static/img/xxx.png' 也可以按照红框中的写法(这种写法对应的是编译后文件的目录)

这样子按照平常的动态绑定src属性你的图片路径在开发模式下和生产模式下的图片资源路径都是不会出问题的

1.2 小问题

但也有个问题就是这种方式引用图片是不会被url等加载器处理的

上面的红框都是这种方式,最下面的红框是用require的方式将图片引进来的(被当成模块被url-loader处理,加入了hash值)

这个需要看网站本身的性质和具体业务以及个人取舍了,当然也可以混合着用,灵活一点没有死的处理方法!

2 css中的本地图片路径在打包后的问题

你的项目在开发模式下css中用url()引用图片是正常的,但是打包后图片路径却并没有被处理或者说特别怪异

导致本地图片资源无法加载,是不是有这样的困惑?

只需要在原有的一个插件上添加一段代码即可:

这个插件大家又应该都比较熟悉,就是将css从打包中单独提取出来作为一个文件夹,上面这个是vue-cil的编译模板,大家可以根据这个参考一下

publicPath这个配置属性的具体其他用法大家可以去官网看看,或者看看源码。了解更多

以上~

vue-cil和webpack中本地静态图片的路径问题解决方案的更多相关文章

  1. vue-cil 和 webpack 中本地静态图片的路径问题解决方案

    1.小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求. 2.大于8k的呢?则直接file-loader打包, 这里并没有写明file-loader.但是确实是需要安装,否 ...

  2. vue本地静态图片的路径问题解决方案

    不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. 大部分的情况中,是开发者使用了错误的写法,例如: <img src="{{ imgUrl ...

  3. webpack中的静态资源处理

    你可能已经注意到,在我们的项目结构里,有两个静态文件的路径,分别是:src/assets 和 static/.那这两个到底有什么区别呢? Webpacked 资源 为了回答这个问题,我们首先需要理解w ...

  4. vue项目,webpack中配置src路径别名及使用

    1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...

  5. 如何解决webpack中css背景图片的绝对地址

    在项目开发中,一般写相对路径是没有问题的,但是在项目比较大的情况下,我的scss文件可能为了方便管理,会放在不同的文件夹下,有的可能又不需要放在文件夹下,比如我的scss文件结构如下: module ...

  6. Vue学习之webpack中使用vue(十七)

    一.包的查找规则: 1.在项目根目录中找有没有 node_modules 的文件夹: 2.在 node_modules 中根据包名,找对应的vue 文件夹: 3.在vue 文件夹中,找 一个叫做 pa ...

  7. vue@cli3 public目录下的静态图片,如何使用在css类文件中(sass可行,纯css不行)

    之前写了一篇vue文件怎么使用的文章,有人问我怎么在css文件中使用public下的文件,这是个好问题,因为我之前都没有研究过 需要解决的2个问题 一开始按照vue文件的使用方式(https://ww ...

  8. vue中显示静态图片怎么引用

    有多种方法解决这个问题: 首先,如果使用的是img标签那么可以这样 data () { return { img: require('path/to/your/source') } } 然后在temp ...

  9. vue 本地静态图片路径写法

    在img标签中 <img src="../../assets/images/haibao/06-2@2x.png" class="" width=&quo ...

随机推荐

  1. json模块及其API

    模块:json 所包含API列表: json.dumps : 将python对象转换成json格式 json.loads : 将json格式字符串转换为python对象 ——————————————— ...

  2. PHP验证码生成及图片处理(GD库)

    GD库是php处理图形的扩展库,GD库提供了一系列用来处理图片的API,使用GD库可以处理图片,或者生成图片,也可以给图片加水印. 本章实现了生成图片并绘画各种形状.图片的压缩.中文字符水印及图片水印 ...

  3. win 10 升级远程连接服务器 要求的函数不受支持

    首先展示错误信息: win10更新系统后,之前连接的服务器都连接不上了,应该用一下方法解决: 运行 gpedit.msc,打开本地组策略:计算机配置>管理模板>系统>凭据分配> ...

  4. asp.net MVC 上传文件 System.Web.HttpException: 超过了最大请求长度

    APS.NET MVC 上传文件出现  System.Web.HttpException: 超过了最大请求长度 这个问题 原因是 默认最大上传文件大小为4096,而我提交的文件太大了. 解决方案:修改 ...

  5. mysql 开发进阶篇系列 5 SQL 优化(表优化)

    一. 使用sql提示 sql 提示(sql hint)是优化数据库的一个重要手段, 是在sql语句中加入一些人为的提示来达到优化操作的目的. 1.1 use index 在查询语句中表名的后面,添加u ...

  6. Android--多线程之Looper

    前言 上一篇博客讲解了Handler实现线程间通信,这篇博客讲解一下Handler运行的原理,其中涉及到MessageQueue.Looper.简要来讲,Handler会把一个线程消息发送给当前线程的 ...

  7. karma测试实践

    karma是Google团队开发的一套前端测试运行框架,它不同于测试框架(jasmine,mocha等),它运行在这些测试框架之上,主要完成的工作有: 1.karma启动一个web服务器,生成包含js ...

  8. 《HelloGitHub月刊》第 02 期

    <HelloGithub>第02期 兴趣是最好的老师,而<HelloGitHub> 就是帮你找到兴趣! 因为我比较熟悉python语言,所以月刊中python语言的项目居多,个 ...

  9. Spring的后处理器-BeanPostProcessor跟BeanFactoryPostProcessors

    最近在重读spring源码(为什么要重读?因为不得不承认,去年跟着<深入解析sping源码>一书过了一遍spring的源码,除了满脑袋都是各种BeanFactory跟BeanDefinit ...

  10. 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...