I am trying to display an image on my page using pug template, but the image is not displayed on the page.
I have the following setup/ files:
index.js
app.use('/images', express.static(path.resolve(__dirname, '../dist/assets')))
template.pug
img.logo(src='/images/logo.png')
The logo.png is located in the /dist/assets/ folder.
I don't get any errors but the image is not loaded/ displayed and when I open the image link from the developers tool in a new tab, the image is shown. Not sure if I am missing anything. Can anyone please explain why this is not working?
You are using logo property to set the image path which is wrong.
It shoud be:
img.image(src='/images/logo.png')
Related
If the url is https://sitenameurl everything works fine, but with https://www.sitenameurl sliders and image gallery don't show. Text and other images not included with javascript are show ok but not the ones that should be added using javascript.
No error on console to fight with. HELP!!
Site without wwwsite with www
It's seem that your content resides on main domain named as https://sitenameurl & you want it on subdomain https://www.sitenameurl which has no content.
You can do it either by htaccess file to redirect https://www.sitenameurl on https://sitenameurl.
Thanks
Thanks Waqar, I had found the problem: I made a javascript code that depending on the url was triggering some functions to show images and sliders. I didn`t include the url with www and so nothing happend!! Fool of me
After 5hrs of struggle I decide it to ask question to see if someone can help me. I use Angular 2 for front end of application and now I have a problem to upload image on my server. Problem is after uploading because my page is reloading again. I use angular2-image-upload. In app.module i add this:
#NgModule({
imports: [
...,
ImageUploadModule.forRoot(),
...
]
})
In html file I have this:
<image-upload
[max]="100"
[url]="'http://myurl'"
[buttonCaption]="'Select Images!'"
[dropBoxMessage]="'Drop your images here!'"
></image-upload>
And everything is ok, image was upload, but in console I got this information
[WDS] App updated. Recompiling..
and page is reloading.
Can anyone knows why this happening?
Thanks in advance
Probably the reason is, Angular listens all the changes event and refresh. Your image are being uploaded inside the directory where Angular listen changes. For example, if you upload your image and move image inside Angular > src > assets (dir). It will detect changes and reloads whole application.
Consider uploading images outside the src directory. You can also read about how Angular detects changes.
Angular Change Detection - How Does It Really Work?
I know the question is asked a year ago but still if someone gets the same issue this might help.
Issue is while image uploading , because it should not reload the page after image uploading and you are getting this message
[WDS] App updated. Recompiling..
because it reloads the whole app from beginning.
So first step is to check preserve log in console , so it will not refresh the console on page reload , it will show you the error.
I want to save this page for offline use, but after saving it completely in chrome, the image links are broken. What is the problem and a solution for something like this?
http://www.xlr8.at/8x8hexbin/
Chrome actually created a new folder for all the images, but the original website has its images in the same root folder as the webpage, thus the links are broken. So saving a webpage like that is not a good idea, but since this website has only 2 images, I am able to fix the link easily by moving those image back to the root folder, and fix the links on the html file.
Example: http://vrviewer.istaging.co/#!/934520
The images aren't showing up. But if you copy their URL from their src:
<a-sky radius="7000" material="color:#FFF;shader:flat;opacity:1;src:url(https://storage.googleapis.com/peterbucket/istagingViewer/teststaging.com.tw//other/web/14666108560_Raw.vr.720.jpg)" src="https://storage.googleapis.com/peterbucket/istagingViewer/teststaging.com.tw//other/web/14666108560_Raw.vr.720.jpg"></a-sky>
The image shows up:
https://storage.googleapis.com/peterbucket/istagingViewer/teststaging.com.tw//other/web/14666108560_Raw.vr.720.jpg
What could be the reason?
(Note: when the image first loads it has a status 304 Not modified. Not sure if this is the reason.)
(Note 2: the same website loads images coming from a different server: http://vrviewer.istaging.co/#!/57e4a8a48ac247005bb91fc7.)
EDIT:
The <a-sky> tag belongs to a-frame.
You have an invalid entity in your code. Remove that and everything looks fine.
enter link description hereenter link description hereThis is a javascript project that was created in Dreamweaver CS5 on a Mac in which if else statements are used to show an alert message along with an accompanying scene image.
I'm baffled why in Dreamweaver the scene images display with the alert message in the preview window but once uploaded to the server only the alt description of the image shows.
My document and the scene images are inside the root folder. However, when I move the scene images to a subfolder they don't display in Dreamweaver preview anymore. That's why I keep them in the same root folder.
I was told to make a subfolder for the images but that doesn't work for me. Yet, I looked at some other student's redo of the same homework that was uploaded to the server and their scenes display. What am I doing wrong. Any suggestions.
check your img src="" attributes. this page http://ciswebs.smc.edu/cis54/tyson_schweidel/stickFigure.htm the image doesn't work because it's got a ";" semicolon appended to the img src. remove the semi colon