I would like to consult you about the problems I have encountered at work.
"Requirements" Now there's a screen that sometimes the user will upload a photo, sometimes they won't! When the user does not upload a photo, the text on the left should be able to be squeezed to the right.
"My Thoughts" If the SRC inside that img is null, use the outer div to display:none; I asked the back-end engineer what the value would be if no photo was uploaded, and he said it would be an empty string.
"Difficulties encountered" However, I have achieved my requirements on CodePen myself, but the effect is lost when moving to the real project.
"My guess" If the user does not upload a photo, there will be no SRC attribute on the img tag at all? How to determine if the SRC attribute in an img is present or not? Searched on the Internet for a long time or do not know how to write better, so come up to ask everyone.
$(function(){
let img_data = $('.item_img').attr('src');
console.log(img_data)
if( img_data == ''){
console.log('沒有照片')
$('.item_content_img').css('display','none');
}else{
$('.item_content_img').css('display','block');
}
}).demo{
width: 400px;
display: flex;
justify-content:space-between;
background-color: #f9cf5a;
padding:20px;
}
.item_img{
width: 100px;
height: 100px;
border-radius:20px;
padding:10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
div class="demo">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae veritatis placeat a ipsum quos id dolore</p>
<div class="item_content_img">
<img src="https://images.unsplash.com/photo-1612564148954-59545876eaa0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="item_img" >
</div>
</div>