vue中根据不同的操作动态引入图片的问题

最新推荐文章于 2024-07-15 11:46:30 发布
最新推荐文章于 2024-07-15 11:46:30 发布
阅读量579 收藏 1
点赞数 2
文章标签： vue.js css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49203377/article/details/121808937
版权
这篇博客介绍了如何根据输入框的聚焦状态动态改变发送按钮的图片。当输入框未聚焦时，按钮显示灰色图片；一旦输入框获得焦点，按钮图片变为蓝色。实现这一效果的方法包括在HTML中绑定图片，通过数据绑定控制图片变量，并在方法中更改图片引用地址以更新视图。示例代码展示了具体的操作过程。
摘要由CSDN通过智能技术生成

背景：输入框没有聚焦的时候，发送按钮用灰色的图片，输入框聚焦之后，发送按钮变成蓝色，当然可以用字体图标然后通过改变，图标的颜色来实现，这里说一些动态改变图片的方法
1.在html中给img绑定图片在这里插入图片描述
2.在data里面定义控制图片的变量
在这里插入图片描述
3.在方法里通过改变图片引用地址就会自动改变视图上的图片
在这里插入图片描述

实现效果如下：
在这里插入图片描述
在这里插入图片描述

weixin_49203377
关注
vue中动态引入图片为什么要是require， 你不知道的那些事
sybh的博客
11-01 7559
与静态资源相对应的还有一个动态资源，先让我们看看网上的各位大佬们怎么解释的。静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。其实上面的总结已经很清晰了。静态资源就是直接存放在项目中的资源，这些资源不需要我们发送专门的请求进行获取。
Vue - 引入图片（动态）的三种方法及使用场景
王佳斌
01-10 4057
前言 如果您想要动态使用就必须使用 require 引入图片，或者使用网络图片 / Base64 编码图片。 例如，典型的不用 require 引入图片的错误示例，如下代码所示： <img :src="src"> data() { src: '../image.png' } 当页面完成加载后，路径被加载器解析为字符串，如下代码所示： <!-- 注意字符串包裹关系 --> <img src="'../image.png'"> <!-- 而正确的解析应为 ↓
vue中动态引入图片
qq_41742576的博客
02-29 2236
可以看出普通加载的图片会被编译成/img/img.13eb2ff7.jpeg这种路径，而动态加载的还是原始路径，这是因为webpack或vite，会将代码编译，最终在内容内构造出一个类似于打包后的dist文件，而就会将普通方式图片路径编译转化成dist文件夹下img文件夹下的资源。很多时间，不管是vue2，还是vue3开发中都会遇到，动态渲染图片的功能，但是为什么我们直接将图片的路径直接赋值给变量的时候，图片渲染不出来，而通过require引入加载图片后却能正常渲染呢？（以下代码为vue3，vue2一样）
Vue根据点击不同的文字改变图片
qq_44747508的博客
12-29 1463
Vue根据点击不同的文字替换图片 html代码 <!-- 在还没有点击文字的时候，这个时候图片的位置是空的，如果需要我们可以在发起请求后直接先赋值上去 me.imgUrl = SKU[0].img;//先将默认的图片赋值上去 --> <div class="SKU-title-img"> <img :src="imgUrl" class="title-...
vue3中图片动态引入
最新发布
weixin_47673852的博客
07-15 678
vue3动态引入图片
vue项目sql图片动态路径引用问题
weixin_30546933的博客
04-17 114
最近遇到一个vue动态图片路径的引用问题？明明路径是正确的但是却渲染不出图片！先看我慢慢说来！！ 1、当我们把图片的路径放置在data（）{return：{}}中的数组中的时候，然后通过v-for循环数组。 　　当我们直接把图片路径给放在对象中的时候就像这样：{imgsrc:"../../assets/img/bbaa.jpg"},结果你发现图片在页面中渲染不出来。 　　但是当我们...
上边图片跟随点击的图片发生变化，点击图片样式发生变化
sunlizhen的专栏
12-07 1575
一下仅仅将代码贴上来了，稍看下就会明白 html代码： view> image src='{{pic}}'>image> view> view wx:for='{{images}}' wx:key = 'index' class='img' bindtap='click'> image src='{{item.pic}}' data-pic='{{
vue动态调节背景图片
qq_45803593的博客
07-08 6272
在一些场景下我们需要使用户可以进行自定义背景图片，包括背景图片和其透明度（当然，还有许多也可以，这里就以这两个为例子，都差不多），这里我就为大家详细介绍如何动态设置背景图片(伪类绑定样式属性值)。...
关于vue中引入图片问题
仗剑东游的猫
04-03 532
当你的图片文件在assets文件夹下，有以下几种用法： 在标签中直接写路径 <img src="../../assets/images/hhh.jpg" class="image"></img> 背景图也可以直接在样式中写路径 .image{ background:url('../../asstes/images/hhh.jpg') no-repeat;...
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
最后，通过上述步骤，可以有效解决Vue-cli3项目中动态引入图片时遇到的404问题。这要求开发者对Vue-cli3项目结构、环境变量、以及Webpack的配置和工作原理有一定的了解，才能准确找到问题所在，并使用合适的解决方案...
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
08-28
在Vue.js框架中，动态绑定图片是常见的需求，特别是在数据驱动的应用中，图片路径可能根据用户操作或后台数据的变化而变化。本篇文章将详细介绍如何在Vue中动态绑定图片以及通过`data`对象返回图片路径的方法。 ...
基于vue 动态加载图片src的解决方法
08-28
一、 Vue 中的动态加载图片src问题 在 Vue 项目中，动态加载图片src是一个常见的问题。当我们使用 Vue 编写项目时，经常会遇到图片加载不出来的问题，特别是在使用 webpack 构建项目时。这是因为 webpack 会将图片...
vue引入图片的方式
qq_45079530的博客
01-05 1598
vue中import与require方式导入图片
vue3动态引入图片
yangyingkuan的博客
05-09 337
url 必须是字符串地址或者字符串拼接地址，
Vue 3使用vite 2.0 动态引入加载图片 :src，解决方法超级简单
热门推荐
weixin_44717047的博客
08-21 3万+
Vue 3使用vite 2.0 动态引入图片 :src
vue：图片切换动态显示
weixin_43995405的博客
07-05 1474
vue图片动态切换
vue动态引入图片
m0_68324632的博客
08-29 9343
这篇文章主要介绍了关于vue图片路径的处理问题，在我们想要动态加载图片路径时，由于vue的打包原理不同，我们也有不同的处理图片路径方法，希望对大家有所帮助。如有错误或未考虑完全的地方，望各位斧正。...
vue浏览或展示支持视频和图片格式
weixin_43638890的博客
11-04 2629
vue浏览或展示支持视频和图片格式
vue动态拼接图片路径、img地址拼接问题 [模板字符串]
mizuhokaga的博客
06-03 1万+
写vue写的不多,记录一下这个小坑 知识点:es6模板字符串${} (一)需求: 根据后端传的json数组的某一字段来拼接img的src路径,动态的绑定img标签的图片,图片来源本地文件夹,如果直接利用+和{{}}来拼接路径,该路径会被加载器解析成字符串 ↓json格式:根据不同的e_status拼接不同的图片 ↓本地文件夹的图片(titleicon.ico没有使用不用管) (二)解决方案 利用ES6的模板字符串进行拼接操作 模板字符串使用反引号 (`) 来代替普通字符串中的双引号和单引号。模板字
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值