vue中如何动态绑定图片,vue中通过data返回图片路径的方法
在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据。
因此在data中必须用require加载,否则会当成字符串来处理。
HTML如下:
JS如下:
以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
您可能感兴趣的文章:
- Vue.js中的图片引用路径的方式
- 基于vue 动态加载图片src的解决方法
- vue cli使用绝对路径引用图片问题的解决
相关推荐
-
vue cli使用绝对路径引用图片问题的解决
前言 Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.Vue官方文档 很全面的. Vue是近两年来比较火的一个前端框架(渐进式框架吧),本文将给大家详细介绍vue cli使用绝对路径引用图片问题的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看吧. 正文: 在页面中使用绝对路径可通过在js中用 require() 引入 data (){ return { sr
-
基于vue 动态加载图片src的解决方法
好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p
-
Vue.js中的图片引用路径的方式
当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 /*错误写法*/ <img src="{{imgUrl}}"> 这样是错误的写法,我们应该用v-bind绑定图片的srcs属性 <img :src="imgUrl"> 或者 <img src="../assets/logo.png
-
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决
-
Nginx中404页面的配置及AJAX请求返回404页面的方法
404页面基础配置 404错误是WWW网站访问容易出现的错误.最常见的出错提示:404 NOT FOUND.404错误页的设置对网站SEO有很大的影响,而设置不当,比如直接转跳主页等,会被搜索引擎降权拔毛.404页面的目的应该是告诉用户:你所请求的页面是不存在的,同时引导用户浏览网站其他页面而不是关掉窗口离去.搜索引擎通过HTTP状态码来识别网页的状态.当搜索引擎获得了一个错误链接时,网站应该返回404状态码,告诉搜索引擎放弃对该链接的索引.而如果返回200或302状态码,搜索引擎就会为该链接建
-
微信小程序如何像vue一样在动态绑定类名
小程序 开发中遇到这样一个问题... 排行榜开发的时候,前三名的样式不同,其余的样式一样.但是都是通过同一元素来遍历的,当时卡了一下.后来发现有module模块化这一概念,于是查了下api,一下子就做出来了. 就是不同名次上边的样式根据实际情况展示效果. 模块化 我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块.模块只有通过 module.exports 或者 exports 才能对外暴露接口. 通俗的将就是自身独立,作用域只作用于该模块,与js互不影响. 主要代码 modu
-
Python中搜索和替换文件中的文本的实现(四种)
在本文中,我将给大家演示如何在 python 中使用四种方法替换文件中的文本. 方法一:不使用任何外部模块搜索和替换文本 让我们看看如何在文本文件中搜索和替换文本.首先,我们创建一个文本文件,我们要在其中搜索和替换文本.将此文件设为 Haiyong.txt,内容如下: 要替换文件中的文本,我们将使用 open() 函数以只读方式打开文件.然后我们将 t=read 并使用 read() 和 replace() 函数替换文本文件中的内容. 语法: open(file, mode='r') 参数: f
-
Vue项目中v-bind动态绑定src路径不成功问题及解决
目录 v-bind动态绑定src路径不成功 解决方案 1 解决方案 2 解决方案 3 vue踩坑--动态v-for图片路径问题 问题所在 解决办法 实现代码 v-bind动态绑定src路径不成功 问题:在做Vue项目的时候,由于项目需求,需要动态绑定img的src时,突然发现如果说是直接请求后台接口的图片地址就能显示, 但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候,图片不能显示. 解决方案 1 当在给数据MyimgSrc 设置绝对路径或者是相对路径时应该使用require引
-
vue中img src 动态加载本地json的图片路径写法
目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-bind的方式加载: PS:vue中图片src路径赋值 vue中引入static文件夹中图片,本以为src中直接写入图片所在路径即可,结果发现图片无法显示,控制台报404错误,图片无法找到.网上找到解决方案,在此mark一下,以便以后查询. 图片src路径动态赋值 <img class="thu
-
解决Vue编译时写在style中的路径问题
写在vue文件里面的style样式,在添加例如背景图片的时候,如果用的是相对路径,那么build出来的css文件的路径将会出错,导致找不到图片. 通过查找资料,在https://segmentfault.com/q/1010000008438061有人的回答解决了问题. 要修改主要有两个,一个就是config/index.js文件,将assetsPublicPath的路径改为'./',这是发布路径,如果构建后的产品文件有用于发布CDN或者放到其他域名的服务器,可以在这里进行设置设置之后构建的产品
-
vue单应用在ios系统中实现微信分享功能操作
表示是第一次使用vue做单应用显目,也是在逐渐的摸索中~更是各种踩坑,各种填坑,打算写博客么?是因为不想写笔记了,嗯嗯 就是这么简单 进入正题. 刚开始做微信分享的这个功能的时候,脑补了官方文档微信JS-SDK说明文档 基础的知识不多说了,反正多看文档总是没错的~在安卓系统上面分享是没出错的,但是在ios上面问题就来了,表示无限吐槽ios,但是吐槽归吐槽,问题总是该解决的-在网上百度了很多vue单应用在ios系统中实现微信分享失败的原因以及解决方案 原因 单页面应用通过什么入口进去的 url保持
-
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由
-
vue踩坑记-在项目中安装依赖模块npm install报错
在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modules\abbrev npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall access npm ERR! enoent ENOENT: no such file or directory, access 'D:\ShopApp\nod
随机推荐
- Laravel学习教程之request validation的编写
- 提示Trying to clone an uncloneable object of class Imagic的解决
- Android自定义View实现QQ运动积分转盘抽奖功能
- 解决js下referer兼容各大浏览器的方法
- Centos7.3下mysql5.7安装配置教程
- 关于树形菜单 Checkbox的全选
- C#实现多选项卡的浏览器控件
- Android学习笔记(二)App工程文件分析
- NodeJs中express框架的send()方法简介
- 在次封装easyui-Dialog插件实现代码
- JAVA中使用JSON进行数据传递示例
- Java实现二维码QRCode的编码和解码与示例解析
- numpy中索引和切片详解
- Python3实现将本地JSON大数据文件写入MySQL数据库的方法
- Python实现的连接mssql数据库操作示例
- 面试中遇到的java逃逸分析问题
- 使用python serial 获取所有的串口名称的实例
- Python3.4 splinter(模拟填写表单)使用方法
- 易语言调用百度api识别是否为色情图片的代码
- Android自定义通用标题栏CustomTitleBar