How set background img from MySQL database in javascript

Question

I am using codelgniter, vanilla javascript , ajex, css, MySQL only

I want set background of image which store in mySQL database

The following code is working very well & not get error but problem is that how can I set background of image storage in database

Note the image is must be get using ajex ( xhr request respond )

The javascript create following css dynamically

.demo0::before {
Background: URL ("path");
}
.demo1::before {
    Background: URL ("path");
    }
.demo2::before {
    Background: URL ("path");
    }
And so on

I have following vanilla javascript

    background_img=www.Demo.jpg; //temporary set
    d_no=0;
    Style0 = document.getElementByITagName("style")[0];
    Style0.type="text/css";
    Data=style0.innerHTML;
    
    style0.innerHTML = data + "demo" d_no+"before { background: url("+ background_img +" );}";

d_no=d_no+1;

Фарид Ахмедов · Accepted Answer · 2022-10-14 19:50:40Z

2

If you get binary image from server:

<script>
fetch("/image") // url of binary image response 
  .then((response) => response.blob())
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    document.querySelector('#body') // element selector, which has background
     .style.backgroundImage = `url(${objectURL})`
  });
</script>

If you have static image

<script>
fetch("/get-image.php") // url of php script, which returns url to static image
  .then((response) => response.text())
  .then((src) => {
    document.querySelector('#body') // element selector, which has background
     .style.backgroundImage = `url(${src})`
  });
</script>

answered Oct 14, 2022 at 19:50

Фарид Ахмедов

8925 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Renishali Batada Over a year ago

Thanks it may be work 100% but I use old version of coordinator also i get the answer from other once again thank you to give answer

Social media · Accepted Answer · 2022-10-15 09:01:37Z

it is simple but tricky you need to make controller model of getting img src/url value in css or javascript or html url or src is may be path or image value

use following code

controller

<?php   
class cover_img extends CI_Controller
{
    public function index()
    {

        $getRequestData=stripslashes(file_get_contents("php://input"));
        $datas=json_decode($getRequestData,true);


        $this->load->model("cover_img_model","cim"); 
        $this->cim->get_cover_img($datas["f_id"]);

    }

}

?>

model

<?php

    class cover_img_model extends CI_Model
    {
        function get_cover_img($username)
        {
            // echo $username;
            $data=$this->db->query("select cover from user_detail where user_name='$username'");
            foreach ($data->result_array() as $row)
            {
    
            echo "data:image/jpg;charset=utf8;base64,";
            echo base64_encode($row['cover']);
    
            }
        }
    }
    
    
    ?>

vanilla javascript

style0=document.getElementsByTagName("style")[0];
style0.type="text/css";
ccs_data=style0.innerHTML+"\n \n";
xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost/CI-social-media/index.php/cover_img", false);
obj = {"f_id":f_id}; // f_id is primary key field value for get the img using where condition in mysql change this f_id dynamically for getting different img
// alert(f_id);
data = JSON.stringify(obj);

xhr.onload = () => {
    if (xhr.status == 200) {

    if (xhr.response) {
        style0.innerHTML = ccs_data +"\t "+ ".demo" + d_no + "::before{ \n\t\t background: url('"+xhr.responseText+"'); \n\t} ";
        // alert(xhr.responseText);

        }
        else {
            alert("something want wrong try agin later")
        }
    }
    else {
        alert("Something Want Wrong Try agin");
    }
}

xhr.send(data);

document.getElementsByTagName('head')[0].appendChild(style0);

d_no=d_no+1;

Collectives™ on Stack Overflow

How set background img from MySQL database in javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related