VSCode image visualisation - html

I have a problem/question with the VSCode. Why doesn't the url of the img tag in my code work? The map is good and the other CSS code is working, the url-s of the img-s are the same...but it is not working in the VSCode's Live Server!
What is the problem? Is it a missing module, some setting, or Windows firewall?
I did not change any setting in the VSCode. Anyways it works with JSBin and CodePen.

Related

My Visual- Code-Editor is not showing the included CSS in the Live preview

I just reinstalled windows on my computer. The problem here is that when I was using the visual code editor before reinstalling windows with the live preview extension and it ran perfectly, but now after I installed windows the VC do not give me live preview like before.
It is just showing the HTML structure and not the linked CSS and Javascript files. There is no styling and formatting being shown on the page even though the page displays perfectly on the browser, tried everything but nothing worked. Note that both windows versions are the same no changes in them.[Only HTML shows up][1]
[no definitions found said by vs code editor also]
Yes, it only shows the HTML preview without CSS. You have to use "Live Server" extension for that.
Download that from here:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
GitHub Source:
https://github.com/ritwickdey/vscode-live-server-plus-plus
Preview:
does a .vs code folder appear ? This problem happened to me once and by deleting the file everything went back to normal. IDK if it will work for you but it worked for me.
BTW there is a Youtube video on that topic, here it is a video for CSS files not working on live server

Why Is My HTML and CSS Code Not Running Properly On The Internet?

I recently added some text effects to my website in HTML and CSS. It runs perfectly on VS Code live sever but whenever I upload the code files on to my cpanel, the effects just seem to go away when I actually click and go on my website and I am not sure why. Does anyone know a fix for this? Here is my website julianwsanchez.com
And this how it is supposed to look:
How It Looks When I open it:
The output I'm seeing on your site matches the output of the code snippet here, effects and all.
Check to see if you have some browser extension that affects the way a site might look (e.g. a dark mode extension). Also, try going to your site in a different browser and/or in Incognito mode.
it Works for me just fine, both the link given, and the files running on localhost
You might need to do a hard reload.
try Ctrl-Shift-R on chrome when viewing the page.
This clears the browsers cache for that webpage,
alternative: open the web page in another browser.

How to use the Vue.js Chrome devtools with jsFiddle?

I am learning Vue.js and am playing around with it using jsFiddle. Vue.js is natively supported by jsFiddle.
However, I can not use the Chrome Browser's vue.js dev-tools with jsFiddle, as it's not detecting it. The little "V"-icon always stays disabled, saying "vue.js not detected".
Now, the problem is, that jsFiddle renders the result in an HTML iframe, and dev-tools as is does not check any iframe for Vue.js apps, as for example, mentioned in this github issue.
I never managed to escape the iframe. Even when opening the framed content's URL in a new window, the resulting HTML page again contains an iframe.
How to use the Vue.js dev-tools with jsFiddle?
My solution to this is using the standalone dev-tools with node.js, as proposed by Geoff Baum in his comment on github.
Just install Vue Developer Tools globally:
npm install -g #vue/devtools
Then run it globally:
vue-devtools
In your fiddle, right on top, just add the proposed script URL:
<script src="http://localhost:8098"></script>
Here's a working jsFiddle, using the standard example: https://jsfiddle.net/suterma/zr2vtg84/4/
<script src="http://localhost:8098"></script>
<div id="app">
<h2>Todos:</h2>
....
</div>
Here's how it looks:

CSS code not working only when website is live

I'm working on my website, matthewbellanalytics.com, and I have been trying to make some changes to the contact.css CSS of the contact page. I edited the CSS file and the changes that I was seeing offline weren't reflected online.
Specifically, I changed the background-color:blue, which worked offline as seen here:
I then replaced that file on my hostgator server and I double checked that it was replaced correctly by re-downloading the CSS file from my cPanel.
background-color:blue was definitely still part of the code.
But when I view the website online. background-color:blue, is mysteriously not part of the CSS file anymore.
I assumed this must be a caching issue so I cleared the cache on both firefox and chrome, but still no luck. I then tried opening the website on Opera which I haven't done before so there should be no cache. No luck.
The online page still isn't updating to blue, and looks like this:
Check the css file path. In server the path might vary.
I was able to solve it in chrome, but not firefox, by going into the developer tools and disabling the cache from there under the "network" tab. No other method of clearing cache seems to work.

Why does my html files get messed up when uploaded

So I've uploaded my html, css and js files via Pydio. But the site seems to get messed up. Can anyone tell me what happened to it and how to fix it?
Some of the google font I used shows up but some didn't. Also, the bootstrap grid doesn't show up like its supposed to be. The site also didn't scale according to screen size.
When I preview the website in Brackets, it looks perfectly fine.
Please help.
mean-design.com
I think that you forgot to upload some files.
Here is the list :
( click on the image to zoom in )
Sounds to me that you did not upload everything or there are some absolute paths in your code. If you copy everything you uploaded to another local machine, does it work then?
You can actually see which files are missing if you open the online version of your page in your webbrowser and have a look at the developer console (press F12 in Chrome, Ctrl+Shift+I in Firefox). In the console all missing files are stated in the logged errors.
Thanks to Relisora we even have a screenshot of the error console:
Check if you uploaded all files and if so, check their path and link tags.