0

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

1
  • @Vainglory07 hmm just tried both of your suggestions, neither work either. anything else i can try?
    – BigBug
    Dec 26, 2012 at 6:10

6 Answers 6

3

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.

1
  • You could also use an asset manager like Assetic. I created a module for zf2 integration here: github.com/erik-landvall/zf2.asset-management It's still in beta, but stable enough for production. I'm looking in to given it a cashing support for the moment. Even if you dont wish to use my way of implementing this, I really suggest you have a look at Assetic: github.com/kriswallsmith/assetic
    – superhero
    Dec 26, 2012 at 13:28
3
<img alt=""  src="img/2 header960.png" align="center" >
2

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. ;-)]

0
0

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

3
  • it is myImage.png - lowercase... i've called it this way in my code as well =/
    – BigBug
    Dec 26, 2012 at 6:32
  • Please try using another image & let me know if still the problem exist. Dec 26, 2012 at 6:38
  • is it possible for you to show me your actual code or the test page? than i can help you in much better way. Dec 26, 2012 at 6:44
0

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

0
<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>
3
  • i'm not running on windows... i tried using the correct direct url (copy pasted from the file properties)...and this does not work
    – BigBug
    Dec 26, 2012 at 6:18
  • copy image and paste near the html file. if does work, dir is Invalid or you should change permission. Dec 26, 2012 at 6:20
  • if you look at the folder structure i provided above, i don't have an html file! it's PHTML file... also, it is next to the PHTML file. lastly, permissions are not an issue here.
    – BigBug
    Dec 26, 2012 at 6:22

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.