title: Render an image in html template using SQLAlchemy
body: <p>I am trying to render an image in my page. I stored the image's local url in my database so that I can get that url in my html file hence, display the image. But what happen is that the image is not displayed. </p>
  
  <p>I opened the html file alone and the image was rendered successfully but when doing it in the python code and run the server, the image is problematic. </p>
  
  <blockquote>
    <p>This is a one item example of database declaration (python code)</p>
  </blockquote>
  
  <pre><code>cable1 = SectionItem(
  name='Remax',
  price='$3.99',
  description='AUX Metal Cable - 3.5mm - 100Cm Male To Male',
  image_url='img/cables/cable1.jpg',
  category=cables
  )
  </code></pre>
  
  <p>This works fine.</p>
  
  <blockquote>
    <p>This is the SQLAlechemy for rendering the image</p>
  </blockquote>
  
  <pre><code>from flask import Flask, render_template, request, redirect, url_for,
  flash
  from sqlalchemy import create_engine
  from sqlalchemy.orm import sessionmaker
  from database import Base
  from database import Accessory, AccessorySection, SectionItem
  
  app = Flask(__name__)
  
  engine = create_engine('sqlite:///mobilystore.db')
  Base.metadata.bind = engine
  DBSession = sessionmaker(bind=engine)
  session = DBSession()
  
  
  @app.route('/')
  @app.route('/mobily')
  def mobilystore():
      all_cables = session.query(SectionItem).filter(
          SectionItem.store_id == 1).all()
      return render_template(
          'mainpage.html', all_cables=all_cables)
  
  
  if __name__ == '__main__':
      app.debug = True
      app.run(host='0.0.0.0', port=5000)
  </code></pre>
  
  <p>Server also runs in terminal without problem.</p>
  
  <blockquote>
    <p>This is the html document in my templates folder</p>
  </blockquote>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;h1&gt;Mobily Store&lt;/h1&gt;
      &lt;/br&gt;  
          {% for i in all_cables %}
          &lt;div&gt;
              &lt;img src="{{i.image_url}}" alt="cable img"&gt;
              &lt;p&gt; {{i.description}} &lt;/p&gt;
              &lt;p&gt; {{i.price}} &lt;/p&gt;
      &lt;/br&gt;
          &lt;/div&gt;
          {%endfor%}
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the price and description is displayed but the image is not. </p>
  
  <p><strong>Note that I put the images in img folder inside templates folder (the same folder contains my html file).</strong></p>
  
  <p>this is the <a href="https://github.com/omarelewa21/ItemCatalogProject" rel="nofollow noreferrer">my-project</a> on github to give you a full insight </p>