Home.php(控制器中的文件)
<?php
class Home extends CI_Controller {
public function index() {
$this->load->helper('url');
//display home page
$this->load->view('home.html');
}
}
?>
home.html(查看页面中的文件)
<!DOCTYPE html>
<html lang="en">
<head>
<title>PortFolio Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
body, html {
height: 100%;
margin: 0;
}
/* First Container */
.bg {
/* The image used */
background-image: url("1.jpg");
/* Full height */
height: 60%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media (max-width: 800px) {
.bg {
height:80%;
}
}
/* Second container */
.bg1 {
background-color: #f77a55;
height:45%;
}
@media (max-width: 800px) {
.bg1 {
height:70%;
}
}
/* Third container */
.bg2 {
height:40%;
}
@media (max-width: 800px) {
.bg2 {
height:100%;
}
}
/* Fourth container */
.bg3 {
background-color: #404040;
height:60%;
}
@media (max-width: 800px) {
.bg3 {
height:190%;
}
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #404040;
padding: 25px;
}
</style>
</head>
<body>
<!--Navigation Bar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Full-stack Developer</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<!--li class="active"><a href="#">Home</a></li-->
<li><a href="#AboutMe">About Me</a></li>
<li><a href="#Services">Services</a></li>
<li><a href="#Portfolio">Portfolio</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="http://localhost/Design/Register.html">Register</a></li>
<li><a href="http://localhost/Design/login.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<!--First Container-->
<div class="bg">
<div class="container text-center">
<br><br><br><br><br><br>
<h1 style="color:White"><strong>Ready For? Engaging Website||</strong></h1>
<h2 style="color:White">Inventive Web design, Development & Android Application!</h2>
</div>
</div>
<!--Second Container-->
<div id="AboutMe" class="bg1">
<div class="container text-center">
<br><br><br>
<h1 style="color:White"><strong>About Me</strong></h1>
<br>
<p style="color:White; font-size: 15px"><b>I'm a Full stack developer providing complete Web solutions to the clients. I have a deep technical knowledge combined with the broad digital media work, website designing and development experience means I can provide you with honest suggestions on what can be delivered with your available resource. My aim is to out perform expectations at every possible chance.</b></p>
</div>
</div>
<!--Third Container-->
<div id="Services" class="bg2">
<div class="container text-center">
<br><br><br>
<h1 style="color:#f77a55"><strong>Services</strong></h1>
</div><br><br><br>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-desktop text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Responsive Web App Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-tablet text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Mobile App Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-television text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">UI/UX Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-cloud text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Hosting & Support service</h4>
</div>
</div>
</div>
</div><br><br><br>
<!--Fourth Container-->
<div id="Portfolio" class="bg3">
<div class="container text-center">
<br><br>
<h1 style="color:#f77a55"><strong>Portfolio</strong></h1>
</div><br><br>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="<?php echo base_url('image/5.jpg'); ?>" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Blue Star Power</h4>
<p style="color:white">Blue Star Power Solutions Private Limited are specialists in Diesel Generator Sales and Service, Annual Maintenance.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="6.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Cavotec Inspired Engineering</h4>
<p style="color:white">Global-Airport Solutions is the global industry’s number one meeting place for Airport Operators/Owners,Managers.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="10.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Gemalto Security Free</h4>
<p style="color:white">You will find our identity authentication and data protection technologies at the heart of modern life, Annual Maintenance.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="11.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Singularity University</h4>
<p style="color:white">Our programs and events equip you with the mindset, tools, and resources to successfully journey to the future. </p>
</div>
</div>
</div>
</div><br><br><br>
<!--fiveth container-->
<div id="Contact" class="container">
<h2 class="container text-center" style="color:orange"><b>Let's Get In Touch!</b></h2>
<p class="container text-center" style="color:orange"><span style="font-size: 18px;">Submit the form and we will get back to you as soon as possible!</span></p><br><br>
<form class="form-horizontal" action="">
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Contact Number:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contact_number" placeholder="Enter Contact Number" name="contact_number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Subject:</label>
<div class="col-sm-10">
<textarea rows="5" class="form-control" id="subject" placeholder="Enter Reason For Contacting..." name="subject"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div><br>
<!--Footer-->
<footer class="container-fluid text-center">
<h4 style="color:white">2018 @ Full-Stack Developer</h4>
<p style="color:white">All Rights Reserved</p>
</footer>
</body>
</html>
我用引导程序做了一个简单的设计,它在本地主机上运行良好,但是当我尝试在我的codeignitor文件夹中输入它时,它不起作用,我是说图像 当我尝试通过codeignitor打开页面时,页面中没有显示它们,我将所有图像保存在view文件夹中,我知道这确实是 一个愚蠢的问题。
我尝试过此操作,但不起作用
<img src="<?php echo base_url('image/5.jpg'); ?>" class="img-responsive img-rounded" alt="image" >
答案 0 :(得分:0)
如果您的图像位于public / images目录中,并且您的 基本网址是
(您可以在/application/config/config.php中检查/设置基本URL
$config['base_url'] = 'enter your base path here';
)
如果您的基本路径是
www.yoururl.com /
然后使用路径
<img src="<?php echo base_url();?>public/image/5.jpg">
答案 1 :(得分:0)
答案 2 :(得分:0)
您不应将图像存储在视图文件夹中。
您应该检查以下一些步骤-
1)首先修复您在base_url
中设置的项目application/config/config.php
2)在应用程序位置上创建一个文件夹(例如:图片)以保存所有图片。那么你就可以 将所需的任何img(例如:5.jpg)保存在此文件夹中。
3)在最后一个要显示图像的步骤中,请使用像这样的代码-
<img src="<?php echo base_url();?>/image/5.jpg">