Displaying an image with Razor, itemId error or empty ID

Question

I am new to Tridion so just playing with the quick guide right now. I have the page rendering but I cannot get my multimedia component to render. I have a component that has a link to a multimedia component which is just an image. The component has a field on it called "image" which is the link to the multimedia component that is my image. My page just loops through components (they are all the same) and displays an article summary (as per the docs). All the other fields on the component render just fine but I can't get the image to. What I am missing?

Article TBB

<article class="wrap wide">
                    <img src="@Component.image" alt="image" />
                    <div class="wrap">
                        <h2 class="title">@Component.title</h2>
                        <p class="info">Posted by @Component.Author - @Component.Date</p>
                        <p>@Component.Summary</p>
                        <p class="more"><a href="#">Read more &raquo;</a></p>
                    </div>                      
                </article>

The page template just does this:

@foreach (var cp in ComponentPresentations) {

        <div>@cp.RenderComponentPresentation()</div>
}

Answer 1

I was able to solve the problem with Nuno's help and information in another post here. Link Resolver with Razor. The fact that in the other post the item was getting resolved with an ID of 0-0-0 made me think it was root in the same issue and it was. The Razor mediator does not publish the binaries. So as part of the TBBs I had to add Publish Binaries In Package. Once I did that all was good.

Answer 2

I don't have experience with the Razor mediator, but will take a leap of faith and assume it works just like the XSLT or Dreamweaver Mediators...

After your Razor TBB executes you should see in the package (if using Template Builder) that the image was added to the package as a binary item.

You should now add the Default Finish Actions to your template, after the Razor TBB, then execute the template again. If you click on the last item in the package (Output), you should now see the images displayed in your html.

The Default Finish Actions is a "TBB of TBBs", it includes multiple Template Building Blocks that execute different tasks on your template. One TBB will resolve links, another will "Publish Binaries in Package" - this is the one you need. It will basically get the actual binary from the package and translate it to a URL that your template can use.