广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何动态给img赋值
  • 791
分享到

vue如何动态给img赋值

2024-04-02 19:04:59 791人浏览 八月长安
摘要

目录Vue动态给img赋值1.如果直接给img的src绑定一个字符串2.解决办法vue动态赋值img的src,用require()用require()就可以了vue动态给img赋值

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()就可以了

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue如何动态给img赋值

本文链接: https://www.lsjlt.com/news/150562.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue如何动态给img赋值
    目录vue动态给img赋值1.如果直接给img的src绑定一个字符串2.解决办法vue动态赋值img的src,用require()用require()就可以了vue动态给img赋值 ...
    99+
    2022-11-13
  • vue怎么动态给img赋值
    这篇文章主要介绍“vue怎么动态给img赋值”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue怎么动态给img赋值”文章能帮助大家解决问题。vue动态给img赋值1.如果直接给img的src绑定一...
    99+
    2023-06-30
  • jQuery如何实现动态给table赋值
    这篇文章主要介绍了jQuery如何实现动态给table赋值,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。html请忽视各种class,因为前...
    99+
    2022-10-19
  • vue如何给input赋值
    在vue中给input赋值的方法:1.新建vue.js项目;2.添加input输入框;3.为input添加@input="changeVersion"样式属性;4.执行代码为input赋值;具体步骤如下:首先,在vue-...
    99+
    2022-10-24
  • vue如何给标签赋值
    在vue中给标签赋值的方法:1.新建vue.js项目;2.在项目中添加div标签,并设置labelId属性;3.使用v-bind指令绑定标签属性;4.通过例化vue对象给标签赋值;具体步骤如下:首先,在vue-cli中创建一个vue.js项...
    99+
    2022-10-14
  • vue实现动态给data函数中的属性赋值
    目录vue动态给data函数中的属性赋值vue给data中的数据赋值报错问题背景分析解决方案vue动态给data函数中的属性赋值 1.首先创建一个监视器,用来监视相关的属性 2.当这...
    99+
    2022-11-13
  • Vue.js中怎么动态为img的src属性赋值
    这篇文章将为大家详细讲解有关Vue.js中怎么动态为img的src属性赋值,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。需求是这样:ajax获取数据如下{ ...
    99+
    2022-10-19
  • vue如何循环给对象赋值
    目录循环给对象赋值把已知数组循环赋值给另一数组循环给对象赋值 async submitForm() { var that = this that.allPe...
    99+
    2022-11-13
  • jquery如何给值赋空
    使用jquery给值赋空的方法:1.新建html项目,引入jquery;2.创建input输入框,设置id属性;3.添加button按钮,绑定onclick点击事件;4.通过id获取input对象,使用prop()方法给值赋空;具体步骤如下...
    99+
    2022-10-18
  • jquery如何给textarea赋值
    使用jquery给textarea赋值的方法:1.新建html项目,引入jquery;2.创建textarea文本域,设置id属性;3.添加button按钮,绑定onclick点击事件;4.通过id获取textarea对象,使用html()...
    99+
    2022-10-13
  • jquery如何给label赋值
    使用jquery给label赋值的方法:1.新建html项目,引入jquery;2.创建label标签,设置id属性;3.添加button按钮,绑定onclick点击事件;4.通过id获取label对象,使用text()方法赋值;具体步骤如...
    99+
    2022-10-06
  • jquery如何给li赋值
    使用jquery给li标签赋值的方法:1.新建html项目,引入jquery;2.创建li标签列表;3.添加button按钮,绑定onclick点击事件;4.在点击事件中创建数组;5.通过each()方法遍历标签,使用text()方法赋值;...
    99+
    2022-10-21
  • jquery如何给src赋值
    使用jquery给src属性赋值的方法:1.新建html项目,引入jquery;2.创建img标签,设置id属性;3.添加button按钮,绑定onclick点击事件;4.通过id属性获取标签对象,使用attr()方法赋值;具体步骤如下:首...
    99+
    2022-10-05
  • jquery如何给div赋值
    使用jquery给div赋值的方法:1.新建html项目,引入jquery;2.创建div标签,设置id属性;3.添加button按钮,绑定onclick点击事件;4.通过id属性获取对象,使用text()方法赋值;具体步骤如下:首先,新建...
    99+
    2022-10-15
  • jquery如何给span赋值
    使用jquery给span赋值的方法:1.新建html项目,引入jquery;2.创建span标签,设置id属性;3.添加button按钮,绑定onclick点击事件;4.通过id属性获取对象,使用html()方法赋值;具体步骤如下:首先,...
    99+
    2022-10-04
  • vue如何动态引入img标签
    在vue中动态引入img标签的方法:1.新建vue.js项目;2.添加img标签并提供地址;3.配置config.js文件;4.在项目中应用配置文件;具体步骤如下:首先,在vue-cli中创建一个vue.js项目;vue create pr...
    99+
    2022-10-07
  • vue中如何给标签赋有标签的值
    Vue是一款流行的JavaScript框架,可以方便地构建交互式的用户界面。在Vue中,给标签赋值是一项基本的操作。本文将介绍如何在Vue中给标签赋值。在Vue中,给标签赋值的方法有很多种。下面介绍其中几种比较常见的方法:使用v-bind指...
    99+
    2023-05-14
  • 微信小程序this.setData给对象&数组动态赋值
    固定属性赋值 wxml: {{formData.title}}  js: data:{ formData:{ title:'hellow' }} 这个时候页面上显示的是 hellow 当我们修改的时候有2种方案 ...
    99+
    2023-09-10
    微信小程序 小程序
  • 如何将javascript值赋给PHP
    本篇内容介绍了“如何将javascript值赋给PHP”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、使用表单提交最常见的将JavaScr...
    99+
    2023-07-06
  • jquery如何给某列赋值
    使用jquery给某列赋值的方法:1.新建html项目,引入jquery;2.创建table表格;3.添加button按钮,绑定onclick点击事件;4.通过标签名获取表格对象,使用find()方法获取指定列;5.使用html()方法赋值...
    99+
    2022-10-15
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作