图像未在codeigniter中显示

时间:2018-06-22 10:21:46

标签: php html css codeigniter

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

3 个答案:

答案 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)

  1. 您不能使用.html文件,因为在html文件中您无法编写php代码。
  2. helper'url'必须加载到autoload.php中,在视图页面中,您必须再次加载helper url。

答案 2 :(得分:0)

您不应将图像存储在视图文件夹中。

您应该检查以下一些步骤-

1)首先修复您在base_url中设置的项目application/config/config.php

2)在应用程序位置上创建一个文件夹(例如:图片)以保存所有图片。那么你就可以    将所需的任何img(例如:5.jpg)保存在此文件夹中。

3)在最后一个要显示图像的步骤中,请使用像这样的代码-

<img src="<?php echo base_url();?>/image/5.jpg">