I uploaded the image via JS. How to change css?

Question

EDIT: I realized that because I did not give out the complete code (I wrote a lot because it was for the final project, but I just had a question with this tiny thing), my question was a bit confusing. The answers are below, but I realized that when I compiled the image data from the request, I assigned it a class, so I just used it for editing, using the answers below to resize the image. Thank!

I am doing this project where we are analyzing data from a query. I am currently using the SoundCloud Stratus API to create a very rudimentary soundcloud webpage.

$.each(data.slice(0,10), function(index, value) {
    var icon = value.artwork_url;
    if (icon == null) {
        icon = 'assets/blacksoundcloud.png'
    }
};

Is there a way to edit the blacksoundcloud.png image in CSS? In particular, I just want to edit the icon image size.

<header>
  <img id="main-logo" src="assets/soundcloud.png">
</header>

<section class="search">
  <input type="text" id="input" placeholder="Search for a song or artist">
  <button id="searchButton">Search</button>
</section>

<section>
  <div class="results-playlist"></div>
</section>

<!-- <script src="http://code.jquery.com/jquery-1.7.2.js"></script> -->
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="startercode_HW4_skeleton.js"></script>
<script src="http://stratus.sc/stratus.js"></script>

Run codeHide result

HTML. . , , "blacksoundcloud.png". -, , .

, .

:

Answer 1

, src , .

<img id="main-logo" src="assets/soundcloud.png">

CSS. <img>, src assets/blacksoundcloud.png, .

img#main-logo[src="assets/blacksoundcloud.png"] {
  width:100px;
  height:100px;
}

100px, . , 336x224. , .

img#main-logo[src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg"] {
  width:100px;
  height:100px;
}

<img id="main-logo" src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg">
<img id="main-logo" src="assets/testsoundcloud.png">

Hide result

, max-width max-height, .

#main-logo {
  max-width: 100px;
  max-height: 100px;
}

, , , , .

img#main-logo[src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg"] {
  max-width:100px;
  max-height:100px;
}

<img id="main-logo" src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg">
<img id="main-logo" src="assets/testsoundcloud.png">

Hide result

Answer 2

.

( ), :

header img {
  width: 100px !important; /* or the size you require */
  height: 100px; /* or the size you require */
}

:

header img {
  display: none;
}
header:before {
  content: '';
  display: block;
  height: 100px; /* or the size you require */
  width: 100px; /* or the size you require */
  background: url(assets/soundcloud.png) 0 0 no-repeat;
  background-size: cover;
}

Answer 3

OP CSS, CSS, , , .

img#main-logo {
  width: 239px;
  height: 114px;
  content: url("https://i.stack.imgur.com/Bw8h1.png");
}

<header>
  <img id="main-logo" src="doesNotExist.png">

</header>

<section class="search">
  <input type="text" id="input" placeholder="Search for a song or artist">
  <button id="searchButton">Search</button>
</section>

<section>
  <div class="results-playlist"></div>
</section>

Hide result

CSS ; . src HTML, , , JavaScript, ; CSS . CSS 3 CSS, URL- .

: , id, HTML, . src CSS, , , :

img.m-logo[src="https://i.stack.imgur.com/Bw8h1.png"] {
  max-width: 100px;
  max-height: 100px;
  vertical-align:top;
}

img.m-logo[src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Giant_leopard_moth_hypercompe_scribonia_3.jpg/339px-Giant_leopard_moth_hypercompe_scribonia_3.jpg"] {
  max-width: 150px;
  max-height: 200px;
  vertical-align:top;
}

<img class="m-logo" src="https://i.stack.imgur.com/Bw8h1.png">
<img class="m-logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Giant_leopard_moth_hypercompe_scribonia_3.jpg/339px-Giant_leopard_moth_hypercompe_scribonia_3.jpg">

Hide result