Localhost: Why does {{ asset.url }} return {{siteUrl}}/path in the browser?

Question

I'm very new at Craft templating, and I can't seem to get an asset to link correctly in the browser.

{% block content %}
    <article>
        <h1>{{ entry.title }}</h1>
        {{ siteUrl }}
        <p>Posted on {{ entry.postDate.format('F d, Y') }}</p>
        {{ entry.blog_body }}
        {% for asset in entry.blog_featured_image %}
            <img src="{{asset.url}}" alt="{{asset.title}}" />
        {% endfor %}
    </article>
{% endblock %}

Becomes this:

<article>
  <h1>New Blog 1</h1>
  http://localhost/craftcms/public/
  <p>Posted on January 15, 2017</p>
  <p>"Body Text"</p>
  <img src="{{ siteUrl }}assets/images/image.png" alt="title">
</article>

when output to a browser.

{{ siteUrl }} will display the path just fine, but when I'm using {{asset.url}} and it gets changed to {{siteUrl}} it doesn't create the path, it just stays at siteUrl. This is really confusing me.

Why doesn't {{ siteUrl }} return the base path when it's used in the asset.url?

Answer 1

What field type is blog_featured_image? Just an image asset? Does it work with

<img src="{{ asset.getUrl() }}" alt="{{asset.title}}" /> ?

Answer 2

You need the .getUrl(); I also suggest that you have a look at the Imager plugin for a more flexible use of images in your site.