2016-12-05 47 views
1

我希望有人可以幫忙。如何使用Codeigniter從數據庫調用圖像?

我正在做一個大學任務,在那裏我正在建立一個網站,以購買杯子/ T恤與他們選擇放在杯子/ T恤上的模因。

請原諒我缺乏代碼,因爲我剛開始時,我正在尋找幫助,我應該這樣做。

目前我的圖片文件夾中有所有的圖片,而且我的數據庫中的每個圖片都有一個記錄,其中包含圖片位置。這是我的米姆表。忽略正/負場,因爲這是用戶向上或向下投票米姆(規格要求)

CREATE TABLE `memes` (
    `id` int(11) NOT NULL AUTO_INCREMENT, 
    `name` varchar(11) NOT NULL, 
    `image` varchar(500) NOT NULL, 
    `postive` int(11) NOT NULL, 
    `negative` int(15) NOT NULL 
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1; 

    sample data = (1, 'baby', 'images/baby.jpg', '0', '0'), 

我有一個網頁,現在當用戶呈現一個空白杯,他們將給出了他們可以選擇哪一個放置在杯子上的模糊列表。我由JavaScript這樣做的,它看起來有點像這樣,

<script type="text/javascript"> 
function main(value) 
{ 
    if (value == 1) 
    { 
     document.getElementById("mainColour").src = "images/dog.jpg"; 

    } 
    else if (value == 2) 
    { 
     document.getElementById("mainColour").src = "images/disney.jpg"; 

    } 
    else if (value == 3) 
    { 
     document.getElementById("mainColour").src = "images/baby.jpg"; 

    } 
    else if (value == 4) 
    { 
     document.getElementById("mainColour").src = "images/waiting.jpg"; 

    } 

    else if (value == 5) 
    { 
     document.getElementById("mainColour").src = "images/duck.jpg"; 
    } 
} 
</script> 
<body> 
<h1> Design your cup! </h1> 
<div id = "page"> 
<div id = "middle"> 

<img src="images/basecup.jpg" width="450" height="450" alt="shoe"id="base"/> 
<div id="cupmeme"><img src="images/blank.png" width="150" height="150"alt="shoe" id="mainColour"/></div> 
</div> 

<div id = "leftMenu"> 

<p>Which meme would you like??</br> 
    <input type="radio" name="main" id = "colourMain" onclick="main(this.value)" value="1" checked >Blue 
    <input type="radio" name="main" id = "colourMain" onclick="main(this.value)" value="2">Green 
    <input type="radio" name="main" id = "colourMain" onclick="main(this.value)" value="3">Pink (+ EUR 5.00) 
    <input type="radio" name="main" id = "colourMain" onclick="main(this.value)" value="4">Red 
    <input type="radio" name="main" id = "colourMain" onclick="main(this.value)" value="5">Brown 
</p> 

在我打電話從文件夾中圖像的圖像的時刻,但我們的講座需要我們,而不是從數據庫中調用此。我有一個模型和控制器的設置,但他們還沒有。

任何人都可以建議嗎?道歉,如果這不明確。今年的最後一次任務,所以我非常渴望完成這一任務。

非常感謝,

Killian。

回答

0

您允許使用服務爲您託管圖片嗎?然後,我會查看諸如http://cloudinary.com/或Amazon S3存儲桶之類的內容,並將圖像鏈接存儲在我的記分表中。

或者你可以去二進制路由,並將每個圖像存儲爲二進制數據。

0

它看起來像你在你的數據庫中已經存儲圖像URL(?),這很好。如果沒有爲你編寫整個東西,你可能會想要創建一個方法來獲取基於ID的圖像(實際上你的JavaScript正在做什麼)。

因此,而不是在JavaScript中的大if語句,您可以運行一個AJAX調用(查看jQuery負載),它將需要一個ID,並讓您返回圖像的URL。

這樣,您可以使用存儲在數據庫中的內容,而不是手動編寫HTML和JavaScript。

相關問題