Vue.js中的图片引用路径的方式_vue.js

来源:脚本之家  责任编辑:小易  

可以。因为javascript主要操作html 中src 和 href 属性、css中的background。js引用相对路径的图片其实是改变html中的 img 或者css中的background等元素www.zgxue.com防采集请勿采集本网。

当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形:

直接查找 然后全部替换 要么就把路径改下

使用一

我们在data里面定义好图片路径

亲测你的代码没有问题,显示{{message}}的话,你首先应该打开开发者工具,看下是否有报错,最大的可能是你vue.min.js引用路径有问题,导致vue.min.js并没有引用进文件。

imgUrl:'../assets/logo.png'

我们刚刚已经完成了一次动态修改的操作,你可以在js中的任意位置修改已绑定的img的src值。注:在vue中,v-bind还可以缩写,以下HTML代码与上面的效果相同。直接将v-bind删掉即可,但是冒号(:)不能删。

然后,在template模板里面

可以去佰百度地图的api,会有下载路径,下载下来之后引用就可以,秘钥好像要买,免费的会有次数限制

/*错误写法*/<img src="{{imgUrl}}">

1、本地的图片?HTML只能连接网站内的图片,即使在本地,也需要先将图片拷贝到网站内。2、网页中引用js文件,象你这样如果用到图片路径等时,要注意的是这个路径如果用相对路径表示的话,是网页与

这样是错误的写法,我们应该用v-bind绑定图片的srcs属性

<img :src="imgUrl">

或者

<img src="../assets/logo.png">

这种方式是按照正常HTML语法引用路径,放在模板里可以被webpack打包出来。

使用二

当我们需要在js代码里面写图片路径的时候,如果我们在data里面写

/*错误写法*/imgUrl:'../assets/logo.png'

此时webpack只会把它当做字符串处理从而找不到图片地址,此时我们可以使用import引入图片路径:

<img :src="avatar" />import avatar from '@/assets/logo.png'

在data里面定义

avatar: avatar

情形三

我们也可以把图片放在外层的static文件夹里面,然后在data里面定义:

imgUrl : '../../static/logo.png'<img :src="imgUrl" />

总结

以上所述是小编给大家介绍的Vue.js中的图片引用路径的方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对真格学网网站的支持!

你可以把Effect里的图片数组保存进一个数组var arr=["images/01.jpg内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 解决vuejs项目里css引用背景图片不能显示的问题
  • vue引用js文件的多种方式(推荐)
  • 关于vue.js发布后路径引用的问题解决
  • vue如何引用其他组件(css和js)
  • vue引用外部js的两种种方法
  • vue中各种通信传值方式总结
  • vue使用axios时关于this的指向问题详解
  • vue如何集成raphael.js中国地图的方法示例
  • vue开发环境跨域访问问题
  • 在vue项目中引用iview的方法
  • 详解如何创建并发布一个 vue 组件
  • vue项目打包部署_nginx代理访问方法详解
  • vue实现固定定位图标滑动隐藏效果
  • 基于vue2.0实现简单轮播图
  • 基于vue框架手写一个notify插件实现通知功能的方法
  • js里面引用了图片路径,我想写在div里
  • js文件不能用相对路径引用图片么
  • vue中,图片如何加载绝对路径的图片?例如:D:/photo/fileName
  • 怎样用js代码引入本地图片的路径?
  • 在VS10中,图片路径,JS路径问题
  • vue 开发环境下怎样定义样式的路径
  • vue中怎么动态添加img的路径
  • webpack+vue怎么做百度地图组件化,其中百度地图的样式和js以及秘钥怎么引用啊?vue新手求高手指点!!!
  • js 中图片连接代码(图片要本地,连接是本地的HTML页面)求救怎么写?
  • HTML代码中的图片链接路径能转化为本地路径吗
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue.js解决vuejs项目里css引用背景图片不能显示的问题vue引用js文件的多种方式(推荐)关于vue.js发布后路径引用的问题解决vue如何引用其他组件(css和js)vue引用外部js的两种种方法vue中各种通信传值方式总结vue使用axios时关于this的指向问题详解vue如何集成raphael.js中国地图的方法示例vue开发环境跨域访问问题在vue项目中引用iview的方法详解如何创建并发布一个 vue 组件vue项目打包部署_nginx代理访问方法详解vue实现固定定位图标滑动隐藏效果基于vue2.0实现简单轮播图基于vue框架手写一个notify插件实现通知功能的方法vue引用js文件的多种方式(推荐)简单理解vue中props属性vue.js常用指令汇总(v-if、v-fovue元素的隐藏和显示(v-show指令vue 进阶教程之v-model详解vue props用法详解(小结)vue之父子组件间通信实例讲解(pr使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue.js中的图片引用路径的方式vue生命周期示例详解简单实现vue的observer和watcher详解vue-cli 接口代理配置vue init失败简单解决方法(终极版)使用vue构建一个上传图片表单解决在vue中使用axios用form表单出现的问使用vue + less 实现简单换肤功能的示例vue百度地图 + 定位的详解浅谈vue+webpack项目调试方法步骤vue组件开发技巧总结
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved