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;

CodePudding user response：

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>

CodePudding user response：

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;