如何用JavaScript从MySQL数据库设置背景图片（CodeIgniter环境）

数据老陈

2026-8-16

问题描述

我使用CodeIgniter、原生JavaScript、Ajax、CSS、MySQL进行开发，希望将存储在MySQL数据库中的图片设置为元素背景。目前动态生成CSS的JavaScript代码可正常运行，但不知道如何通过Ajax获取数据库中的图片路径来完成背景设置。

现有动态生成的CSS示例：

.demo0::before {
  background: url("path");
}
.demo1::before {
  background: url("path");
}
.demo2::before {
  background: url("path");
}
/* 以此类推 */

我的原生JavaScript代码：

background_img = "www.Demo.jpg"; // 临时设置
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;

解决方案

1. 编写CodeIgniter后端接口（获取图片路径）

首先在CodeIgniter中创建控制器方法，从MySQL查询图片路径并返回JSON格式数据：

<?php
class ImageController extends CI_Controller {
    public function get_background_images() {
        // 加载数据库驱动
        $this->load->database();
        // 假设表名为backgrounds，存储图片路径的字段为image_path
        $query = $this->db->select('image_path')->from('backgrounds')->get();
        $images = $query->result_array();
        
        // 返回JSON响应
        header('Content-Type: application/json');
        echo json_encode($images);
    }
}

2. 原生Ajax请求获取图片路径列表

用原生JS发送Ajax请求，拿到后端返回的图片数据：

const xhr = new XMLHttpRequest();
// 路径需对应你的CodeIgniter路由规则
xhr.open('GET', '/index.php/ImageController/get_background_images', true);

xhr.onload = function() {
    if (this.status === 200) {
        const imageList = JSON.parse(this.responseText);
        // 调用动态生成CSS的方法
        generateBackgroundStyles(imageList);
    }
};

xhr.send();

3. 修正并完善动态CSS生成逻辑

修复原JS中的拼写错误，循环生成对应CSS规则：

function generateBackgroundStyles(imageList) {
    // 获取页面第一个style标签（注意修正原代码的拼写错误）
    const styleTag = document.getElementsByTagName('style')[0];
    let cssContent = styleTag.innerHTML || '';

    // 遍历图片列表，生成对应.demoN::before的样式
    imageList.forEach((item, index) => {
        // 转义路径中的引号，避免CSS语法错误
        const safePath = item.image_path.replace(/"/g, '\\"');
        cssContent += `.demo${index}::before { background: url("${safePath}"); }\n`;
    });

    // 更新style标签内容
    styleTag.innerHTML = cssContent;
}

关键注意事项

确保MySQL中存储的是图片的完整URL或服务器相对路径（如/uploads/background_01.jpg），不要直接存储二进制图片数据；如果存的是二进制，需后端额外提供转base64或单独的图片访问接口。
Ajax请求的URL需匹配你的CodeIgniter路由配置，若开启了URL重写，可去掉index.php。
原JS代码中的getElementByITagName是拼写错误，正确写法为getElementsByTagName，同时注意JS的大小写敏感性（变量名Style0和style0需统一）。

内容的提问来源于stack exchange，提问作者Renishali Batada