I have an image in my theme in a .tpl file defined like this:
<img class="logo" src="/public/img/Logo.svg">
However the image is not found even though it is in this directory:
/themes/theme_name/assets/img/Logo.svg
The result in the console is thus
GET http://localhost/public/img/Logo.svg 404 (Not Found)
Even though my url to the shop is this:
http://localhost/prestashop/en/
How do I get prestashop 1.7 to display this image or know where exactly to look for it?
In TPL try with : <img class="logo" src="{$urls.img_url}Logo.svg">
Regards
Related
I have a route /member/:id, and on this route there is a image need to be show. I try with static image first like this:
<v-img src="#/assets/photos/Nan.jpeg"/>
or
but It does not show anything or a small broken image icon.
enter image description here
In vue extension of chrome, it contains:
currentSrc: http://localhost:8080/member/img/Nan.93326bd3.jpeg
I cannot see the photo on this path
but I can see on http://localhost:8080/img/Nan.93326bd3.jpeg.
I guess the error related to "/member/"
I also try with "require and :src" or "import" image, but it didn't work.
How can I fix it?
We store the images in /public/images , so if you store an image with file name myImage.png at images folder, you can do:
<v-img src="/images/myImage.png"/>
I currently face the following problem:
I included a couple of assets (PNG images) in src/assets/images/img.png. Inside the snippet where I want to display the image, I wrote this (as defined in the documentation):
<img src="{{ '../assets/images/img.png' | asset_url }}"/>
When executing slate build I can also see those images show up during the build process in the log. But when I start my dev server (npm run start:dev) the link to the image is broken and it doesn't get displayed. Any thoughts on how to solve this issue?
Your link is built all wrong. The Liquid filter asset_url resolves the path for you. All you need to provide is the name of the asset. So if you rewrite your Liquid correctly it would look like this:
{{ 'img.png' | asset_url }}
Reads as hey Shopify, go find img.png in the assets and return for me the complete path to it.
According to documentation,
https://stencil.bigcommerce.com/docs/other-handlebars-helpers
I use a CDN handlebar helper to add an image to my template:
<img src="{{cdn "webdav:img/about.jpg"}}">
After theme uploading, it was changed to:
<img src="https://cdn6.bigcommerce.com/s-1tfospd5/content/img/about.jpg">
Okay, but I need to update the picture.
After uploading a NEW version of the picture to bigcommerce webdav, nothing changes, I still see the old one.
How can I update the picture on CDN?
You need to wait about 30 minutes until the CDN get the new image.
You can test if the new image is there by adding some querystring to your image :
https://cdn6.bigcommerce.com/s-1tfospd5/content/img/about.jpg?test=test_new_image
You can try with :
<img src="{{cdn "webdav:img/about.jpg?new=logo"}}">
I've included the package, the pdf gets generated but somehow the images dont appear on the pdf. The HTML content and CSS works like expected.
When i return the view as how you'd normally return a view in laravel, the receipt displays nicely along with the images.
But when i:
return PDF::html('receipt.show', $data);
The images dont appear.
My view file has the image like so:
<img class="img-responsive" src="img/receipt/banner.jpg">
The image is within:
public/img/receipt/banner.jpg
This is a laravel app running on homestead environment.
You need to use absolute path in image src attribute instead of relative. Smth like:
<img class="img-responsive" src="http://your-domain.com/img/receipt/banner.jpg">
You can use
<base href="http://your-domain.com/" />
into your head and it will help for all your links
First off I am completely new to Javascript but I have some HTML/CSS experience. I've been trying to create an html/javascript image gallery for a website; (It would probably be a lot easier to do in PHP but the web coordinator disabled PHP on our server for security reasons).
Anyway What I have is a page showing an Album-list, Album-browser and Photo-viewer in different a div and 2 iframes respectively. I have it set up so that when someone clicks on an album from the album list, a page is opened up in the album browser section (iframe:"browser-frame" showing thumbnails of all the images in the particular album). I've been trying to set it up so that when someone clicks on an image in the album browser the image will appear in the Photo-viewer section (iframe:"viewer-frame" showing the photo itself).
I didn't want the photo's in the viewer-frame to be larger than the set dimensions for the viewer-frame so I created a page for the viewer-frame that puts the image in a div with a class of set dimensions (defined in a stylesheet) as follows:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
</div>
</body>...
I then created a script that updates the image src to a variable:image_to_be_viewed and called it image-changer.js
// JavaScript Document
{
var image_to_be_viewed="images/album1/1.jpg";
document.getElementById("viewed_image").src=image_to_be_viewed;
}
And added a script to the viewer-frame page so it looks like:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
<script src="image-changer.js"></script>
</div>
</body>...
Now I wanted the gallery to work so that in the page loaded in the browser-frame, whenever one clicked on one of the pictures, the value of the global variable 'image_to_be_viewed' would be changed to the source of the clicked image as follows:
<body>
<div class="photobrowse">
<img class="medium" src="images/album1/1.jpg" onClick="image_to_be_viewed='images/album1/1.jpg'"/>
<img class="medium" src="images/album1/2.jpg" onClick="image_to_be_viewed='images/album1/2.jpg'"/>
<img class="medium" src="images/album1/3.jpg" onClick="image_to_be_viewed='images/album1/3.jpg'"/>
</div>
</body>
It doesn't work....
the gallery i'm working on is on http://ptc.tamu.edu/test/gallery_directory/test_gallery.html
everything up to the loading of the selected picture in the viewer frame works (I'm running the onlick event on the default loaded pictures 1,2,3 in the browser-frame page)(default pic's 4 and 5 simply load the image in the iframe but with no way to adjust the size it is too big and gets cut off and i don't want that)
I've been working on for an entire day and I'm sure I'm doing something wrong here but I can't figure out what exactly it is. I have a feeling it has to do with changing the global variable: image_to_be_viewed from the browser-frame page but I wanted to confirm with experts instead of flopping about like a headless fish. I'm going to continue trying to figure this out but i thought maybe having some expert assistance would speed up the process.
What the onclick triggers should be a javascript function call.
e.g. onclick="changeImg('images/album1/1.jpg')"
And the function itself should looks like this
function changeImg (image_to_be_viewed) {
document.getElementById("viewed_image").src = image_to_be_viewed;
}
btw, you probably should learn javascript a little bit more before work on something real. I recommend this book
thank you I got it to work! I figured that the changeImg function was targeting the wrong document/wrong frame and I fixed it by changing the js script to:
function changeImg (image_to_be_viewed) {
window.parent.viewer_frame.document.getElementById("viewed_image").src = image_to_be_viewed;
}