vue动态定义图片路径

 当我在html模块或者css中引入图片的时候用相对路径,例:

<div>
     <img src="../../assets/img/policeImg/tt.png">
</div>

  

  这时候图片可以正常显示,但是我想把图片路径动态化,所以我会把图片路径绑定在data中。

<div>
     <img :src="img">
</div>
<script>
      export default {
           data () {
               return {
                   img: ‘../../assets/img/policeImg/tt.png‘
               }
           }
      }
</script>

 我们会发现图片显示不出来。

几种情况

  第一种情况图片放在assets文件夹下面,在html模版中直接引入或者在css中引入,如下:

WechatIMG4.jpeg

WechatIMG5.jpeg

我们可以看到不管是在html中引入或在css中引入图片都会被解析成base64编码,打包之后dist文件夹中也不会有图片,而是在压缩文件中有base64编码。
  解释:因为加载一张图片就需要发送一次http请求,会降低页面性能,这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURI。相当于把图片数据翻译成一串字符,再把这些字符打包到文件当中,最终只需要引入这个文件就可以访问这个图片。当然如果图片较大,编码会消耗性能,因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy,一般会放在static文件夹下面。

WechatIMG7.jpeg

WechatIMG8.jpeg

  上面代码中我们可以看到在css中引入assets文件夹中的图片,但是编译或打包之后都显示这张图片在static文件夹下面,说明这张图片大小超过了limit范围,所以直接被拷贝到static文件夹下。那么url-loader和file-loader有什么关系呢?
  简单的说,url-loader封装了file-loader,只需要安装url-loader即可,不需要安装file-loader。url-loader工作分两种情况:1.文件大小小于limit参数,url-loader将会把文件转为DataURL;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader,file-loader将图片拷贝到static文件夹下。
  第二种情况图片放在assets文件夹下面,在js中引入,如下:

WechatIMG9.jpeg

WechatIMG10.jpeg

从上图我们可以发现如果在js中直接写,编译后图片是无法显示的,但是如果用require或import就可以正常展示,而且跟在html中或者css中直接引入效果是一样的。

WechatIMG11.jpeg

WechatIMG13.jpeg

WechatIMG12.jpeg

  解释:使用不同的方式展示图片,webpack对他们的处理方式也是不同的:使用import或者require或者background都会被webpack的url-loader当做依赖模块处理,如果是直接写在js中,因为js是动态的所以webpack是不会处理的,打包后也不会显示在dist目录中。
  第三种情况图片放在static文件夹下面,在html、css、js中直接引入,我们会发现图片都可以正常展示。

1547536132355.jpg

总结:webpack只能处理静态资源。assets 和 static两个文件都是静态的,但是它们是有区别的,static文件夹下面的文件都是不能被webpack处理的,你必须使用绝对路径来引用这些文件,取决于在config.js里面加入的build.assetsPublicPath 和 build.assetsSubDirectory这两个属性设置的。其他地方的文件或图片都会被webpack解析成模块依赖,这时候就可以用url-loader和css-loader去处理。如果在js中引用图片,因为js是动态的所以没有办法去处理,但是我可以使用require或import将图片当成模块加载进来,就会被webpack当成静态文件解析,这时候就可以被url-loader处理。

原文地址:https://www.cnblogs.com/yjiangling/p/11751813.html

时间: 2024-10-10 03:36:47

vue动态定义图片路径的相关文章

vue 动态引入图片地址

1.相对路径引入(src下的assets文件夹) 当你在 JavaScript.CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时,该资源将会被包含进入 webpack 的依赖图中.在其编译过程中,所有诸如 <img src="...">.background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖. 例如,url(./image.png) 会被翻译为 require('./image.pn

vue-cli 动态设置图片路径遇到的问题

<template> <figure v-for="(item, index) in list"> <div class="wrap"> <img class="image" v-bind:src="item.img" /> </div> </figure> </template> <srript> var swiptData =

jquery动态设置图片路径和超链接href属性

js document.getElementById("myImage").src="hackanm.gif"; jquery $("img", $(this)).attr("src", "../images/select.JPG"); 改变超链接属性类似 jQuery $('#loga').attr("href","#bottomlogin") 原文地址:https

wxparse动态图片路径扩展

1:首先要去下载wxparse富文本编辑器,然后放到小程序项目里使用2:修改wxparse源代码,扩展图片路径2-1:html2json.js 头部声明全局变量 var __imageDomain = ''; 下面这个代码加入__imageDomain 扩展函数 function setImageDomain(domain) { __imageDomain = domain; } 2-2:wxDiscode.js 扩展函数,可根据实际业务需求扩展 function urlToHttpUrl(ur

vue图片、背景图片路径问题

vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo.png" > 2.app.vue  <style>中引入图片 body {background: url('../static/img/back5.jpg');} 3.组件行间样式引入背景图片 <div style="background-image:url(’s

vue 关于图片路径的问题

在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的 <img src="../assets.1.jpg"/> 如果我要用v-bind去动态绑定呢,正常思路来说 我会这样写,但是在vue 中 他会被当成一个字符串来处理,并不会转换为图片的路径 <img src="src"/> export default { name: 'index', data () { return { imgsrc2: '../

php动态获取网页图片路径~

<?phpheader("Content-type:text/html;charset=utf-8"); 请求的url $url = 'http://dsc.taobaocdn.com/i8/560/330/566337787959/TB1eUs_LlLoK1RjSZFu8qtn0Xla.desc%7Cvar%5Edesc%3Bsign%5Eeba34dfbbd144cadd988b77fa55a102e%3Blang%5Egbk%3Bt%5E1552268585'; 定义一个数

ThinkPHP中关于JS文件如何添加类似__PUBLIC__图片路径

在对html样式进行优化的时候,经常会用到Js/jquery进行一些跳转切换的样式,而我们常做的就是在Js/jquery代码中嵌url图片链接代码,以实现动态交互的页面效果. 如下图所示: ------------------------------------------------------------------------------------------------------------------------------- 问题:Js文件不认识__PUBLIC__这些think

社交应用动态九宫格图片的规则

这里主要以微信和QQ空间为作为研究对象,得到的结论如下. QQ空间里的动态 iOS设备,以iPhone6为分界 iPhone6及以上分辨率的设备: 当宽且高同时 > 512px时,判断 宽/高的比例值:大于 2时,以高度为基准,缩小到512px,宽度等比缩.小于等于 2时,以宽度为基准,缩小到512px,高度等比缩 当宽.高其中一边小于512px,直接下原图: iPhone6以下的设备(5s.SE.4s),判断条件同上,只是将512px改为200px Android规则同上,只是以1280分辨率