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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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 动态加载本地json的图片路径写法

    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如何动态绑定img的src属性(v-bind)

    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 render函数动态加载img的src路径操作

    分享一下我去如何解决vue render 中 如何正确配置img的src 路径? 一.我的项目中有俩层组件, 第一层父组件,第二层是render函数封装的组件,父组件调用render函数组件 二.render函数中需要创建<img>标签,img中的src是父组件传进来的: src正确传进来,图片却不不显示. 三.解决办法: 首先在父组件中将图片import进来, import empty from "./img/empty.png"; 在父组件的data中声明一个变量,将e

  • 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赋值

    目录 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实现动态验证循环属性表单的思路

    antd+vue实现动态验证循环属性表单的思路

    希望实现查询表单的某些属性可以循环验证必填项: 需求: 1.名称,对比项,备注必填,默认为一行,可增加多行 2.根据名称,动态请求对比项列表,名称变化时,清空该行当前选择的对比项 思路:将整个搜索分成了两个表单,分别去做验证.一个是可动态添加的循环表单form,另一个为普通表单dateForm html <a-form :form="form" @keyup.enter.native='searchQuery'> <div class="dynamic-wr

  • vue.js动态组件和插槽的使用汇总

    vue.js动态组件和插槽的使用汇总

    目录 组件进阶-props校验 props校验 组件进阶 - 动态组件 组件进阶-keep-alive组件 keep-alive 组件进阶-keep-alive组件-指定缓存 组件进阶 - 默认插槽 格式 组件进阶-具名插槽 组件进阶-作用域插槽(难点) 自定义指令-基本使用 自定义指令-定义方式 示例 自动获取焦点 自定义指令-传值和更新 组件进阶-props校验 props校验 普通格式: props: ["propA", "propB"].没有类型检查 高阶格

  • SpringBoot+Vue实现动态菜单的思路梳理

    SpringBoot+Vue实现动态菜单的思路梳理

    目录 1. 整体思路 2. 前端渲染 3. 后端菜单生成 3.1 菜单表 3.2 菜单接口 关于 Spring Boot + Vue3 的动态菜单,松哥之前已经写了两篇文章了,这两篇文章主要是从代码上和大家分析动态菜单最终的实现方式,但是还是有小伙伴觉得没太看明白,感觉缺乏一个提纲挈领的思路,所以,今天松哥再整一篇文章和大家再来捋一捋这个问题,希望这篇文章能让小伙伴们彻底搞清楚这个问题. 1. 整体思路 首先我们来看整体思路. 光说思路大家还是云里雾里,我们结合具体的效果图来看: 最终菜单显示效

随机推荐