CODEWITHSUNDEEP
zend-framework2assets
BigBug
BigBug

Reputation: 6290

how to use html img

I have the following folder structure in my zend framework 2 tutorial project in Ubuntu:

/zf2tutorial
    /module
        /Album
            /view
                /album
                    /album
                        myImage.png
                        index.phtml

in my index.phtml code I have a line such as this:

<img alt='SMALLIMG' src='myImage.png'/>

this does not work.

If I change the myImage.png to be http://www.someurlhere.com this works fine.

How do I load in myImage.png instead? I tried giving it the direct URL:

/home/myUsername/NetBeansProjects/zf2tutorial/module/Album/view/album/album/myImage.png

I've also tried doing the following:

../myImage.png

but neither of these worked.

Also please note, it has to be a bad path (I must be doing something wrong here) because the broken image icon shows up... indicating there is a linking problem here.. the direct URL is copy pasted from the properties section of the image itself..

Upvotes: 0

Views: 232

Answers (6)

Ali Mohammadi
Ali Mohammadi

Reputation: 1324

<div id='small_image'>
    <a href='/feeds/posts/default' title='smallimg'>
        <img alt='SMALLIMG' src='c:/home/myUsername/NetBeansProjects/zf2tutorial/module/Album/view/album/album/myImage.png'/>
    </a>
</div>

Upvotes: 0

ali
ali

Reputation: 124

<img alt=""  src="img/2 header960.png" align="center" >

Upvotes: 3

BADAOUI Mohamed
BADAOUI Mohamed

Reputation: 2204

It's not a problem of image or path. You are trying to make an impossible thing.

You certainly define in your virtualhost configuration that the documentRoot is your public directory.

That means your web server will give access to resources located from this public directory.

You have to put your resources from this public path (css, images..) or you can define a symbolic link if you allow followingSymlinks.

Hope this helps.

Upvotes: 3

David Weinraub
David Weinraub

Reputation: 14184

The fundamental issue you are confusing is the difference between views vs public content.

View files are essentially HTML templates into which you can inject certain values at runtime. Your directory structure correctly places this stuff within a views directory inside your module. These template files themselves are never exposed to the end-user. They are only used by the application to generate fully-populated HTML chunks that are eventually sent to the browser.

In contrast, static assets - like images, javascripts, external stylesheets, etc - are served directly by the webserver to your visitors. As such they need to be in a directory that the webserver has been told to publicly serve to visitors.

The easy thing to do is to simply move directories containing these static assets out of the module and into the app's public folder.

But this is undesirable in the sense that you might reasonably want the module to be a self-contained entity: it can contain its own routes, its own controllers/actions, and, in particular, its own static assets.

So, how to make the webserver reach down into the module and treat some of the content there as "public"?

The answer is to use an "asset manager", a component that links certain module content into the app's public directory. Typically this means:

  1. Activate the asset manager module
  2. Create a public directory inside your module
  3. Place those static assets there
  4. Inform the asset manager which public module directories into the public app directory.

Take a look at the AssetManager module by Roberto Wesley Overdijk and additional instructions for use.

[As a side note, welcome to the world of web development. ZF2 is a great framework, but it's not the easiest thing for a beginner. It provides a lot of flexibility for doing things in a "good way", but it can certainly come off as convoluted at first. Try not to get discouraged. ;-)]

Upvotes: 2

Vainglory07
Vainglory07

Reputation: 5273

try to look for an .htaccess file somewhere in your dir most probably on module folder..that file blocks the access for the image you are trying to link..(my basis here is my application in yii which fails to show the image even if the path is correct)

you may create an images folder in your home dir: /zf2tutorial/images for example and put all the images there calling it: src="/images/myImage.png"..

or

find the htaccess im talking about, change the restrictions(or delete it:|) and you can use this path: src="/module/Album/view/album/album/myImage.png"..

Upvotes: 0

Rohit Suthar
Rohit Suthar

Reputation: 3628

the reason may be the image extension (.png)

please check your exact extension case, is it written in small or capital case???

update your image link exactly as like the name of image.

eg.

myImage.png or myImage.PNG

Upvotes: 0

Related Questions