How to Set the Equivalent of a Src Attribute of an Img Tag in Css

Is it possible to set the equivalent of a src attribute of an img tag in CSS?

Use content:url("image.jpg").

Full working solution (Live Demo):

<!doctype html>

<style>
.MyClass123{
    content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>

Define an img's src attribute in CSS

#divID {
    background-image: url("http://imageurlhere.com");
    background-repeat: no-repeat;
    width: auto; /*or your image's width*/
    height: auto; /*or your image's height*/
    margin: 0;
    padding: 0;
}

Replace src of Image tag using css property

You can use content:url("image.jpg")

https://developer.mozilla.org/en-US/docs/Web/CSS/content

In your CSS,

.img {
    content:url("/new/image/source.png");
}

If you cannot modify HTML,

img {
    content:url("/new/image/source.png");
}

In HTML,

<img class="img"/>

I have not try this yet, but I not sure if the inline attribute src will overweight the CSS content.

Update

It should work if you already have src for your img element. Thanks @pol

Replace image src location using CSS

You can use a background image

.application-title img {  width:200px;  height:200px;  box-sizing:border-box;  padding-left: 200px;  /*width of the image*/  background: url(http://lorempixel.com/200/200/city/2) left top no-repeat;}

<div class="application-title">  <img src="http://lorempixel.com/200/200/city/1/"></div><br />Original Image: <br />
<img src="http://lorempixel.com/200/200/city/1/">

How to add IMG SRC attribute into SPAN CSS background-image on click

It's not fully clear from your example what you want to do. Here is an example that might help you.

$(function() {
  function moveShade(target) {
    $("#thumbs1 .shade").css({
      width: $(target).width(),
      height: $(target).height(),
      top: $(target).position().top,
      left: $(target).position().left
    });
  }
  $('#thumbs1').delegate('img', 'click', function() {
    $('#largeImage1').attr('src', $(this).attr('src'));
    $('.lightbox span').css('background-image', 'url(' + $(this).attr('src') + ')');
    $("#thumbs1 .active").removeClass("active");
    $(this).addClass("active");
    moveShade(".active");
  });
  moveShade(".active");
});

a[href='#img1'] img {
  width: 480px;
}

#thumbs1 {
  position: relative;
}

#thumbs1 img {
  width: 100px;
}

#thumbs1 .shade {
  background-color: rgba(0, 0, 0, 0.45);
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#img1">
  <img id="largeImage1" src="https://i.imgur.com/HGKqg1T.jpeg" />
</a>

<a href="#" class="lightbox" id="img1">
  <span></span>
</a>

<div id="thumbs1">
  <img class="active" src="https://i.imgur.com/HGKqg1T.jpeg" />
  <img src="https://i.imgur.com/bLvEb3m.jpeg" />
  <img src="https://i.imgur.com/IjT9NLy.jpeg" />
  <img src="https://i.imgur.com/CkIsdeq.jpeg" />
  <div class="shade"></div>
</div>

Is it possible to change img src attribute using css?

No - CSS can only be used to change CSS background images, not HTML content.

In general UI elements (not content) should be rendered using CSS backgrounds anyway. Swapping classes can swap background images.

How to display an image using an img tag and css and class instead of src attribute

You'll need to also apply a height and width in the css for the image. If it changes per image then apply height and width in the same class as the background image. If it is always the same height/width apply it in a shared class. I'd also suggest to add a src on the img and use a transparent gif as the image. You should also apply an alt tag on the img, use the title as the text.