I have tried these solutions :
<img th:src="#{/resources/images/logo.png}"/>
<img th:src="#{../images/logo.png}"/>
<img th:src="#{classpath:images/logo.png}"/>
In all cases I am getting a
Link base "/resources/images/logo.png" cannot be context relative (/)
How can I fix this?
If you are adding the image to an email, the src must be a URL. This means that the image must be accessible from the outside.
Related
I'm showing images from resources/static/images/
The weird thing is if I give the path like "/images/milk.png", it shows the image but if I get name from ${}, it doesn't work.
<img class="card-img-top"
th:src="#{/images/${res.getLogo().getUploadFileName()}}"
th:alt="${res.getLogo().getUploadFileName()}" />
it seems res.getLogo().getUploadFileName() is working well. So it will be replaced like /images/milk.png. But it doesn't show the image...
How can I fix this?
One more thing, I know basic Thymleaf path is resources/templates, but how it recognize image when I gave like "/images/milk.png"
If u want to upload static images
th:src="#{images/} + ${res.logo.uploadFileName}"
if you want to upload dynamic images
th:src="#{https://~~~.com/} + ${id}
My image won’t display for no reason. I am a noob but I can’t figure it out. The image loads from the url so I know it’s not that. So I’m pretty sure it’s my problem with the coding.
<body>
<img src=https://www.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG?dl=0
Height=300Width=250>
</body>
Your URL is pointing to non-image resource. It's actually pointing to an HTML document.
In URL, change www by dl and remove ?dl=0.
This is valid image URL :
https://dl.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG
Alternatively, you can replace dl=0 to raw=1. This is also valid image URL:
https://www.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG?raw=1
Not always required but as a good practice I'll suggest using quotes for values. Also as mentioned in comments seperate attributes from each other with white space.
<img src="https://dl.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG"
height="300" width="250"/>
<!--OR-->
<img src="https://www.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG?raw=1" height="300" width"250"/>
source : Mickel's Tutorial
I hope, you must use the url of image, But you are referring the url preview pane of dropbox.
It is the actual url for image.
You also need some improvisation with your code, as below
<body>
<img src="https://uc215f04ebb05efbc98d874fefb2.previews.dropboxusercontent.com/p/thumb/AA767gGwgVfZ9rVS7PJbtIOR3eQsWN4mrXjNjVJH3JKjhI5eE7JOd-eQJwydUx1gPkpE3zkAnMSN3-1KEtFN86x-CdWnREg0mQ6hm7APBCuifux1ECDivRuLkrikn1sY_r20EmBWucKHyy-Ps5VPB8ehkUB6x0y9kSb3QzYpP8fOo7IeyR6IaCYZ66mxrJiUiUtzTAV3ddESpRV7lSRaumsSyVPc4k1RbUBS3-_JDnP8Qv6M42x2g7bZDy9vdhhIOZaO585_XQHegapCJ-8bnwLGt-VEy9nud0avi_gzMSpXxx3EXt_NYTWMfFqfstb2HFMVb7WK7jxkSRSX5eE5ck3Q0bdEPAKp1aPnClU2KqI-OgUea6ApGp4G0H4Q3l3UyOjfomtn-SndAAaUzPbaU1HK/p.png?fv_content=true&size_mode=5" height="300" width="250" />
</body>
It will work without any issue. You are not referring proper url that the actual issue.
Also, keep tag properties in quote "" if required.
Like
<img src="url" height="200" width="300" />
Thanks.
I am retrieving text which contains images saved in WYSIWYG editor(Summernote). Is there a way to replace src attribute value in img tags using asset()?
Example:
<img src="images/image.jpg"/>...
To:
<img src="https://.../images.jpg"/>
I want solution which would cover all bases: spaces in image name, different extensions...
Sure, just use the curly brace syntax in your blade to render the asset()
<img src="{{ asset('whatever_you_want') }}"/>
I don't think you can do it in Blade. You could, in your model, add a function that replaces all images to full paths. This could be done through a regex pattern that looks for URLs in tags.
I would, however, make sure the full path to the image is included in the text in the database. This way, you always have access to the right path to the image, and you're not relying on a piece of code to display the right image.
I am creating a crawler which needs to download the logo from every website it crawls.
It is quite hard to detect which image is the logo, however I don't need 100% accuracy, so I am thinking of just looking for <img> tags which fulfil any of the following conditions:
A. The name of the image in the <img> tag has the word "logo" in it, for example:
<img src="logo.gif">
<img src="site-logo.jpg">
<img src="mainlogo.png">
B. The class or id in the <img> tag has the word logo in it, for example:
<img class="logo" src="something.gif">
<img id="main-logo" src="something.gif">
<img class="background logo" src="something.gif">
I've tried following the W3C XPATH documentation, but it is not very user friendly. I've also tried using what are supposed to be wildcards (according to w3schools) but they do not appear to work as expected.
Is it possible to achieve what I want using XPATH? Could you help provide some pointers or example code?
Thank you.
You could use:
/html/body//img[contains(#src, 'logo') or contains(#id, 'logo') or contains(#class, 'logo')]
which will find all img tags that are a descendant of the body tag, where the src, id or class attribute contains the text logo.
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" />