symfony2, img doesn't show - image

In my twig template I have
<img scr="{{ asset('bundles/jbamain/images/kanren1.png') }}" />
At runtime it becomes
<img scr="/jba/php/web/bundles/jbamain/images/kanren1.png" />
If I browse to
http://localhost/jba/php/web/bundles/jbamain/images/kanren1.png
then, the image is returned as expected.
However, the page, which has the tag doesn't show the image. I set image file permission to 664. Also I set image width and height in css, but still the same. What may cause this issue?

You have error in image attribute src. So change scr -> src

Related

Custom image in footer (Prestashop)

I have a small question. I am using prestashop, and would like to add image in my footer. I am trying to add img tag in footer.tpl
<img src="/htdocs/themes/warehouse/img/logo_btm.png" alt="logo" />
but instead of picture i have question mark.
you use relative path
instead of relative path use full url to your image like
http://domain.com/link/to/image.jpg
You have to use smarty global var, put the image in your theme's image folder and use this syntax
<img src="{$img_dir}logo_btm.png" alt="logo" />

JPG not showing

![enter image description here][1]I've tree jpg to show. Here's the html:
<img id="carrossel1" class="imagemCarrossel" src="/images/home/fundo_carrossel1.jpg" />
<img id="carrossel2" class="imagemCarrossel" src="/images/home/fundo_carrossel2.jpg" />
<img id="carrossel3" class="imagemCarrossel" src="/images/home/fundo_carrossel3.jpg" />
The first one is rendered fine. The two other not.
The image folder have:
fundo_carrossel1.jpg
fundo_carrossel2.jpg
fundo_carrossel3.jpg
The 2nd and 3rd don't show up in Chrome of Firefox...
Maybe your CSS is modifying the elements resulting in a change of display behavior. Can you post the CSS you are using to further try to help?

Specify Thumbnail Dimensions in Microdata for RichSnippets

I added metadata tags for our products as specified by http://schema.org, for use by RichSnippets, etc...
It works great except that our products only have 3x2 images, and google resizes them to square for the RichSnippets, which causes them to look terrible.
I've seen examples where
Is there a way to specify the dimensions of an image tagged as itemprop="thumbnailUrl" (or itemprop="image") without changing the image's actual size?
Edit: injecting PageMap (as seen in http://support.google.com/customsearch/bin/answer.py?hl=en&answer=1626955) data didn't work for me, as the rest of the page is done with microdata.
Edit: My object is http://schema.org/Recipe, which doesn't include width or height for its thumbnailUrl object.
Make a copy of your thumbnail images resized or cropped to look fine as a square, as this is what SE will show, then use the meta tag with content to specify using those thumbnails instead of the ones you show on your webpages.
e.g.
<div itemscope itemtype="http://schema.org/Recipe">
..
<meta itemprop="thumbnailUrl" content="http://my/optimized/thumbnail/url.png" />
<image src="http://this/is/the/thumbnail/not/resized.png" />
..
</div>

Magento: image file extension has %20 appended on to it when using WYSIWYG

when inserting images using the WYSIWYG in a page in the back-end, the image file extension has %20 appended on to it (which i believe is a space), if you click the hide editor button to view the HTML it will look like this
<img src="{{media url="wysiwyg/example.png"}}%20" alt="" />
Clicking insert image from the html source view inserts the image fine, it's when i'm in the actual wysiwyg editor the problem occurs.
After I've selected my image and inserted it i'm taken back to the popup box with the "Image URL" field in the general tab. It's here that a space is getting added on to the end of the file.
http://example.com/index.php/admin/cms_wysiwyg/directive/___directive/rfe33fSB1cmw9Ind5c2l3eWcvQ3wfwfer43cifX0,/key/rufheufuh4uh42eaf7611b26e2e1x1786/
Above is an example url from the image url field and a space is getting added after the last forward slash resulting in the %20, therefore not displaying my images.
Where can i trim this value as that will probably fix it?
Thanks for any help.
Try to use this:
<img src="{{media url="wysiwyg/example.png" _query="%20"}}" alt="" />
Or maybe:
<img src="{{media url='wysiwyg/example.png'}}%20" alt="" />

What does this Firefox symbol mean?

This symbol of a ripped paper is appearing on some of my <a> tags in Firefox Browser..
Here is an example:
Does anyone know what this means?
Thanks!!
update : here's some code:
<a href="#" onClick="jQuery('#youtube-player-container').tubeplayer('play');">
<img class="mp3button" style="background-image:url('/mp3_play.png');background-size:100% 100%;" />
</a>
(the image does appear appears so it's not a problem with the img src)
The ripped paper icon is for a broken image src. You would see it if you requested an image that didn't exists ie:
<img src="notarealimage.jpg"/>
In your case you have no src attribute, which is why the browser sees it as a broken image.
Given that you're using a background image on your img tag, I suggest changing the img tag to a span or div tag, or just adding the style attribute to the a tag and removing the img tag altogether, i.e:

Resources