codeigniter 如何在javascript中设置MySQL数据库的背景图片

crcmnpdw  于 2022-12-06  发布在  Java
关注(0)|答案(2)|浏览(142)

我正在使用codelgniter,vanilla javascript,ajex,css,仅MySQL
我想设置存储在mySQL数据库中的图像的背景
下面的代码运行得很好,没有错误,但问题是我如何设置数据库中图像存储的背景
请注意,必须使用ajex(xhr请求响应)获取图像
javascript动态创建以下css

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

我有以下的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;
vcudknz3

vcudknz31#

这是简单的,但棘手的,你需要使控制器模型获得img源/url值在css或javascript或html url或源可能是路径或图像值
使用以下代码
控制器

<?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"]);

    }

}

?>

模型化

<?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']);
    
            }
        }
    }
    
    
    ?>

普通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;
rm5edbpk

rm5edbpk2#

如果从服务器获取二进制映像:

<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>

如果有静态图像

<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>

相关问题