add segment before controller without changing base url

Question

I have a url like this

localhost/codeIgniter/Depan?lang=id

and I want to make it like this

localhost/codeIgniter/id/Depan

where localhost/codeIgniter is the base_url, /id is parameter for language, and /Depan is the controller name. But since I change the url as the second one. The base_url is changed to localhost/codeIgniter/id. So everytime I pass images location like assets/image/pic1.jpg from javascript. The link in html become localhost/codeIgniter/id/assets/image/pic1.jpg. And the file that actually stored in codeIgniter/assets/images folder is can't accessed. Ive already set the

$config['base_url'] = 'localhost/codeIgniter'

I wish I could use the second url without changing the base url

HTML

 <div class="picture container">
  <img id="slide" src="">
  
  <div class="desc">
   <div id="text">
    <p></p>
   </div>

   <div id="text">
   </div>
  </div>

  <div onclick="prev()" class="prev">
   <img src="<?php echo base_url();?>assets/button/prev.png">
  </div>

  <div onclick="next()" class="next">
   <img src="<?php echo base_url();?>assets/button/next.png">
  </div>

  <div class="pics">
  </div>
  
  <script> var sldrpic = <?php echo json_encode($sldrpic); ?>;</script>
  <script src="<?php echo base_url();?>javascript/sldr_home.js"></script>

 </div>

Javascript

function firstslide() {
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src;
 document.getElementById('slide').alt = sldrpic[step].nama;

 document.getElementById('text').childNodes[1].innerHTML = sldrpic[step].nama;
}

with the javascript I want to pass the slideimages[] array that contain folder path assets/image/pic.jpg to the

<img id="slide" src="">

Answer 1

I have put base url variable in html as shown below.

 <div class="picture container">
  <img id="slide" src="">
  
  <div class="desc">
   <div id="text">
    <p></p>
   </div>

   <div id="text">
   </div>
  </div>

  <div onclick="prev()" class="prev">
   <img src="<?php echo base_url();?>assets/button/prev.png">
  </div>

  <div onclick="next()" class="next">
   <img src="<?php echo base_url();?>assets/button/next.png">
  </div>

  <div class="pics">
  </div>
  
  <script> var sldrpic = <?php echo json_encode($sldrpic); ?>;</script>

        // echo base url from php
  <script> var base_url ="<?php echo base_url();?>"; </script>

  <script src="<?php echo base_url();?>javascript/sldr_home.js"></script>
 </div>

javascript

function firstslide() {
    if (!document.images)
        return
    // note: base_url is variable. not function.
    document.getElementById('slide').src = base_url + slideimages[step].src;
    document.getElementById('slide').alt = sldrpic[step].nama;

    document.getElementById('text').childNodes[1].innerHTML = sldrpic[step].nama;
}