Hi,

I'm developing a custom module which is basically a form and I need to show a picture as an element of the form. The code part is:

$form['box'] = array(
    '#type' => 'markup',
    '#prefix' => '<div id="box" class="image_class">',
    '#suffix' => '</div>',
    '#markup' => '<img src="sites/all/modules/form_example/picture.jpg" alt="picture" style="width:100px;height:75px;">',
  );

I'm sure of the path because it is working on another model I've built. But the picture does not show in this module, just a broken link picture. Could anyone please tell what I might be doing wrong here?

Comments

Jeff Burnz’s picture

Use your inspector, either broken image link (path is wrong, image missing etc) or permissions, cannot be anything else.

You should use base_path(), that path is fragile.

jackboy125’s picture

I'm sure of the path because it is working on another model I've built. But the picture does not show in this module, just a broken link picture. Could anyone please tell what I might be doing wrong here? the link below give the way you want. http://driver-start.com/pennsylvania
try this once and u will get sucess.

Amjad_dokhan’s picture

Hi guys,

I added "http://localhost/drupal/" to the link and it worked beautifully. Thanks alot. But by the way as I'm rather new to drupal and PHP programming as well I'm always tryin to improve my programming skills. so I'm working to learn how to use the base_path(). Furthermore, could anyone tell me what is meant by inspector anyways ? Thanks to all aggain. Have a nice day

Jeff Burnz’s picture

In your browser (doesnt matter which one, all the major browsers these days have one), if you right click on an element and select "Inspect" or might be "Inspect element" the "inspector" will open - this can tell you many things, such as if a link is broken, the CSS applying to the element and all sorts of stuff. Firefox probably has the best inspector at the moment, although Chrome/Opera are pretty darn good as well.

Jeff Burnz’s picture

localhost will, of course, break on your live site, I hinted at the real solution:

'#markup' => '<img src="' . base_path() . 'sites/all/modules/form_example/picture.jpg" alt="picture" style="width:100px;height:75px;">',

Amjad_dokhan’s picture

oh. This inspect feature is a great one. I bet it'll come in handy in the future. Thanks alot Jeff.

nitin.k’s picture

In src attribute of img tag, we need to have full qualified path of the image.
Sometimes such kind of path works in local systems due to local server reference urls.
This path can also be managed by css too.

Thx..

Amjad_dokhan’s picture

That makes sense then why its working on some modules and some not. Thanks !

Jaypan’s picture

You need a leading forward slash on the path to the image, otherwise it will add the path you are using to the path of the page you are viewing.

You can do this:

'#markup' => '&lt;img src="' . file_create_url('sites/all/modules/form_example/picture.jpg') . '" alt="picture" style="width:100px;height:75px;">',
  );