vue如何动态给img赋值
目录
- vue动态给img赋值
- 1.如果直接给img的src绑定一个字符串
- 2.解决办法
- vue动态赋值img的src,用require()
vue动态给img赋值
1.如果直接给img的src绑定一个字符串
<img :src=nowIcon />
data () { return { nowIcon: '' } }, this.nowIcon = '../assets/64/' + 图片名 + '.png'
vue会将这个路径当成字符串,不会给这个图片路径编译,图片显示不出来
此时的路径是未经过编译的,代码为:
<img src='../assets/64/100.png' />
2.解决办法
this.nowIcon = '../assets/64/' + 图片名 + '.png'
改为
this.nowIcon = require('../assets/64/' + 图片名 + '.png')
此时的代码是正常编译后的路径,图片正常显示
<img src="/img/101.ce5f2cfc.png">
vue动态赋值img的src,用require()
首先,单独一个src是可以的
<img src="../../assets/logo.png" alt="图片" />
数组是这样的
想改为动态赋值的形式就实现不了
<img :src="item.img" alt="图片" />
所以改为如下:
在webpack中会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法解析图片地址,将图片作为模块加载进去,用require()就可以了
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue render函数动态加载img的src路径操作
分享一下我去如何解决vue render 中 如何正确配置img的src 路径? 一.我的项目中有俩层组件, 第一层父组件,第二层是render函数封装的组件,父组件调用render函数组件 二.render函数中需要创建<img>标签,img中的src是父组件传进来的: src正确传进来,图片却不不显示. 三.解决办法: 首先在父组件中将图片import进来, import empty from "./img/empty.png"; 在父组件的data中声明一个变量,将e
-
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.js 动态为img的src赋值方法
需求是这样: ajax获取数据如下 { "code": "200", "data": { "SumAmount": 200, "List": [{ "amount": 100, "sex": "male", "fee": 1, "id": 98, "status": 2, "ti
-
vue如何动态绑定img的src属性(v-bind)
目录 动态绑定img的src属性(v-bind) 解决办法 vue添加img的src地址 v-bind 动态绑定img的src属性(v-bind) 今天遇到一个特别坑爹问题,页面中使用img动态绑定图片路径时总是不显示.(处理前的代码) <div class="prod-content"> <div class="prod-item" v-for="(item,index) in Merchant" :key="ind
-
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
:id绑定 :id="'a_'+index" 输出的id为a_0,a_1..... <div v-for="(item,index) in list" :key="index" > <div :id="'a'+index" @click="b(index)">哈哈哈</div> </div> 然后在vue的实例中就可以拿到对应的id b(index){ thi
-
vue如何动态给img赋值
目录 vue动态给img赋值 1.如果直接给img的src绑定一个字符串 2.解决办法 vue动态赋值img的src,用require() vue动态给img赋值 1.如果直接给img的src绑定一个字符串 <img :src=nowIcon /> data () { return { nowIcon: '' } }, this.nowIcon = '../assets/64/' + 图片名 + '.png' vue会将这个路径当成字符串,不会给这个图片路
-
vue实现动态列表点击各行换色的方法
只是模拟一练习 v-for v-on v-bind的一个简单demo 代码思路: 遍历出data里面的数据 v-for 给li加点击事件 绑定class样式 怎么控制样式的显示 通过 class的控制 v:bind:class={class:index==变量} 下标和class变量是否相等控制true false 代码: <div id="app"> <ul> <li v-for='(item,index) in arr' v-bind:class='{
-
vue.js input框之间赋值方法
如下所示: demo.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Index Page</title> </head> <body> <form action="" id="demo"> <input type="text" va
-
使用Vue生成动态表单
开需求会了,产品说这次需求的表单比较多,目前有18个,后期的表单可能会有增加.修改.我作为这次的前端开发,看到这样的需求,心里知道要这样搞不得把自己累死,首先表单居多,还会有变更,以后维护起来也让人心力憔悴. 于是我提议做动态表单,做一个表单的配置系统,在系统里配置表单类型.表单得字段.以及对表单得管理.后来重新评审了需求,系统部分由后端自行开发,我要处理的部分是动态生成表单,展现提交的表单,以及对表单的处理情况. 数据接口设计 表单类型的接口就不用说了,这个比较简单.我跟后端约定了一个预备创建
-
VUE 实现动态给对象增加属性,并触发视图更新操作示例
本文实例讲述了VUE 实现动态给对象增加属性,并触发视图更新操作.分享给大家供大家参考,具体如下: 在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property).然而它可以使用
-
antd+vue实现动态验证循环属性表单的思路
希望实现查询表单的某些属性可以循环验证必填项: 需求: 1.名称,对比项,备注必填,默认为一行,可增加多行 2.根据名称,动态请求对比项列表,名称变化时,清空该行当前选择的对比项 思路:将整个搜索分成了两个表单,分别去做验证.一个是可动态添加的循环表单form,另一个为普通表单dateForm html <a-form :form="form" @keyup.enter.native='searchQuery'> <div class="dynamic-wr
-
vue.js动态组件和插槽的使用汇总
目录 组件进阶-props校验 props校验 组件进阶 - 动态组件 组件进阶-keep-alive组件 keep-alive 组件进阶-keep-alive组件-指定缓存 组件进阶 - 默认插槽 格式 组件进阶-具名插槽 组件进阶-作用域插槽(难点) 自定义指令-基本使用 自定义指令-定义方式 示例 自动获取焦点 自定义指令-传值和更新 组件进阶-props校验 props校验 普通格式: props: ["propA", "propB"].没有类型检查 高阶格
-
SpringBoot+Vue实现动态菜单的思路梳理
目录 1. 整体思路 2. 前端渲染 3. 后端菜单生成 3.1 菜单表 3.2 菜单接口 关于 Spring Boot + Vue3 的动态菜单,松哥之前已经写了两篇文章了,这两篇文章主要是从代码上和大家分析动态菜单最终的实现方式,但是还是有小伙伴觉得没太看明白,感觉缺乏一个提纲挈领的思路,所以,今天松哥再整一篇文章和大家再来捋一捋这个问题,希望这篇文章能让小伙伴们彻底搞清楚这个问题. 1. 整体思路 首先我们来看整体思路. 光说思路大家还是云里雾里,我们结合具体的效果图来看: 最终菜单显示效
随机推荐
- 在Ruby中查找和执行方法
- JSON 编辑器实现代码
- Javascript基于对象三大特性(封装性、继承性、多态性)
- JavaScript 继承详解(三)
- js实现非常简单的焦点图切换特效实例
- PHP实现动态web服务器方法
- C#调用系统API指定快捷键的方法
- mysql 5.7.18 zip版安装配置方法图文教程(win7)
- php实现读取内存顺序号
- 解决Python requests 报错方法集锦
- 图片上传即时显示缩略图的js代码
- 关于IIS连接数(瞬间连接数)和“在线人数”的详细说明
- Apache NameVirtualHost *:80 has no VirtualHosts问题解决办法
- C#实现漂亮的数字时钟效果
- 利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
- JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
- Oracle 数据库操作类
- Python压缩和解压缩zip文件
- C#利用原图和水印图的重叠简单实现水印的方法
- C#获取数组中最大最小值的方法