img使用三元运算符不生效

最新推荐文章于 2024-07-08 10:17:43 发布

艾文达

最新推荐文章于 2024-07-08 10:17:43 发布

阅读量1.7k

点赞数 3

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_46392266/article/details/123032540

版权

本文介绍了在Vue中使用三元运算符动态绑定img标签的src属性时遇到的问题及解决方法。问题在于路径错误，解决方式是通过在data中require图片路径或者直接在html中使用require包裹图片路径。详细步骤包括将图片路径存入data，然后在模板中使用这些数据来动态设置src。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

img使用三元运算符不生效

1、 img标签使用三元运算符绑定src不生效：

<img :src="this.Flag ? '../../assets/img/img1.png' : '../../assets/img/img2.png'" alt="">

2、不生效原因

路径错误，img标签使用三元运算符动态绑定src需要require包裹图片路径。

3、解决

①把图片放在data里面 require(图片)：

data(){
 return{
 	url1:require('./assets/img1.png')
	url2:require('./assets/im2.png');
 }
}
--------------
<img :src=" this.Flag ? url1 : url2 " alt="">

②直接写在html中：

<img :src="this.Flag?require('../../assets/img/img1.png'):require('../../assets/img/img2.png')" alt="">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

艾文达

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue中＜img＞标签图片想实现动态切换时，无法正常显示问题

头发掉光光的博客

10-22

4783

目录问题描述解决办法问题描述最近又在写项目，写到点赞这个地方的时候，想要实现一个图片的动态切换。本以为是一个很简单的问题，没想到却出了问题。首先我们来看看不进行动态切换时的状态： <img src="../assets/image/踩.svg"> 此时的浏览器控制台显示的是这样的: 图片的路径和我们在编辑器中写的是有出入的。而当我想要是实现动态切换时，我最...

[鸿蒙原生开发]Swiper页面设计开发

bagayalucaonima的博客

11-03

906

通过Swiper组件ForEach循环渲染配合断点功能，设计实现一个完整的响应式的列表渲染的Swiper轮播图页面案例，该页面的主体Swiper组件会在大设备中显示3个内容，在中小设备分别显示2个和3个内容。希望能助力您的原生应用开发，完整代码在文章末尾。示例项目为随易App

参与评论您还未登录，请先登录后发表或查看评论

在img标签内使用三元表达式切换图片，图片无法正常显示--vue

weixin_46353030的博客

08-05

4026

一、使用方法 <img src="判断条件?url1:url2"/> 查看是不是判断条件的问题路径错误：

vue2.0中动态绑定img的src属性的方法（三元运算）

simpleMan8023的博客

07-08

2241

函数在构建时会解析图片路径，并将图片打包到正确的位置。使用 require 可以确保路径在打包时正确解析。可以用于在运行时加载资源，但这种方法通常用于更复杂的场景，如按需加载模块。在标签里进行三元运算符判断的时候，引用地址外层需要加require()使用computed属性来动态计算img的src路径。/* 你的样式 */

img标签使用三元运算符动态绑定src不生效的原因

歪脖前端的博客

09-09

3898

img标签使用三元运算符动态绑定src不生效的原因解：设判断条件为 a img标签使用三元运算符动态绑定src需要require包裹图片路径

记录一下，在vue中动态绑定src中使用三元表达式是无效的！！

SkipCode Blog

10-27

3091

在vue中动态绑定src中使用三元表达式是无效的要切换的话可以使用v-for来判断

img动态src地址要加require

haohaoxueqd的博客

11-08

1580

img 动态src 写require

SpringBoot MarkDown笔记不含图片

寒泉

01-30

6万+

**一、**Spring Boot 入门 1、Spring Boot 简介简化Spring应用开发的一个框架；整个Spring技术栈的一个大整合； J2EE开发的一站式解决方案； 2、微服务 2014，martin fowler 微服务：架构风格（服务微化）一个应用应该是一组小型服务；可以通过HTTP的方式进行互通；单体应用：ALL IN ONE 微服务：每一个功能元素最终都是一个可独...

<div id="contentCon"> <c:forEach items="${somexq }" var="xq" varStatus="status"> <c:if test="${status.index%3==0}"><ul></c:if> <li class=""> <div> <ol> <li><a href="Queryxq?id=${xq.id }" class="yili"><img src="zs/${xq.zs }"alt=""></a></li> <li>${xq.name }</li> <p>¥${xq.price }</p> </ol> </div> </li> <c:if test="${status.index%3==2}"></ul></c:if> <c:if test="${status.index%3!=2 && len==status.index+1}"></ul></c:if> </c:forEach> </div>

热门推荐

zy1992As的博客

11-16

7万+

三目运算符又称为“三元运算符”和“条件运算符”，在java、C、C++、python、JavaScript、PHP等编程语言中都有三目运算符。三目运算符的作用就是判断，可以理解为if条件判断的简化版。

在vue中为什么img动态src地址要加require，三目运算符

m0_64380162的博客

08-05

2416

来动态加载图片资源的情况通常是在模块化的环境下，特别是在单文件组件中。在vue中使用三元运算符计算src动态来绑定图片地址的时候会不显示，这是因为vue使用的是webpack来进行打包的，从而不能正确的找到地址。语法，或者在某些情况下，甚至可以直接使用图片的相对路径。: webpack 可以根据配置对图片进行压缩和优化，从而减小应用的总体积，提高加载速度。可以将图片资源作为模块引入，从而可以在代码中更方便地操作和管理这些资源。需要注意的是，随着前端技术的不断发展，尤其是在 Vue 3 中，使用。

HTML中的三元运算符

BUST_ORANGE的博客

06-22

3351

HTML中的三元运算符

vue | 解决img绑定data中储存img地址及三目运算符切换不同地址无法显示的问题

weixin_51464636的博客

12-29

617

浅记一下，怕忘。

三目运算符?:填在数据绑定中

c_sharp_Rookie的专栏

11-27

1830

用来显示个人资料中地址信息的Label在FormView中，当地址信息为空时，Label应显示为“未设置”，写函数的话，可以这样写：protected void formViewTest_DataBound(object sender, EventArgs e){ if (((Label)formViewTest.FindControl("lblAddress")).Tex

javascript 两张图片切换三目运算符

weixin_30322405的博客

03-16

797

<body> <script> function changeImage(){ var s = document.getElementById('myimage'); s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif"; } &...

三元运算符控制图片的显示和隐藏

03-29

三元运算符是一种简单的条件表达式，可以根据条件的成立与否来决定执行不同的操作。在控制图片的显示和隐藏中，三元运算符可以根据某个变量的值来决定是否显示图片。例如，假设有一个变量 `showImage`，它的值为布尔类型，表示是否显示图片。那么可以使用三元运算符来控制图片的显示和隐藏： ``` <img src="image.jpg" style="display: {{ showImage ? 'block' : 'none' }};"> ``` 上面的代码中，三元运算符判断 `showImage` 的值，如果为真则将 `display` 属性设置为 `block`，否则设置为 `none`。这样，在页面渲染时，如果 `showImage` 为真，则图片会显示出来；否则图片会隐藏。需要注意的是，三元运算符只是一种简洁的语法，它并不会改变实际的显示和隐藏效果。如果需要完全控制图片的显示和隐藏，还需要在代码中添加相应的逻辑来处理。