i created a vue project using vue-cli 3 and while working in my local env i managed to present all images in components html part the following way:
<template>
<img class="logo" src="#/assets/images/logo.svg" alt="logo">
</template>
in my machine the full path to the image (starting from the src folder as root) is src/assests/images/logo.svg
when running the project on the local env the image loads and it's source is
/assets/images/logo.svg which redirects to http://localhost:8080//assets/images/logo.svg.
now when i upload the project to my staging env the source changes (and i cant figure out why) to src="/img/logo.230e726c.svg" and the image is missing.
following info i found online i also tried:
src="~#/assets/images/logo.svg" which didn't work as well .
any idea what am i missing here and how should i import images in my template? or how did the source url turn to this (what seems to be quite random) path?
UPDATE
i noticed that on my local machine , when inspecting the result in the dev tools, the content type is Content-Type: image/svg+xml; charset=UTF-8 and when inspecting on staging the content type is content-type: text/html
plus there also another header which only appears in staging and its content-encoding: gzip
, i'm not sure but does this should serve as some clue??
another thing worth mentioning, when trying to upload png every thing works fine and the image elemnt looks like this:
<img data-v-7d622f5c="" src="data:image/png;base64,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" alt="logo" class="logo">
Related
I'm working on the vuejs app and on developer mode my app running fine as expected. But when I creating the build and serve its build on local/server its not showing the images which is inside the folder of /public/images/image_1.jpg
Here is the code where I'm referencing the images in the component.
computed: {
locomotion_image() {
return `/images/Locomotion_${this.image}.jpg`;
}
}
in the template consume this computed property
<img v-if="size === 'lg'" :src="locomotion_image" :alt="[$t('locomotion cow ') + image]" class="hygiene-score-images__img mb-3">
the is the development environment image, as you can see the path is correct and images are showing as expected
warning I'm getting when build is complete
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (5.46 MiB)
js/chunk-vendors.e5ec3734.js
css/main.881ab0a7.css
js/main.f96f8547.js
as you can seen here images are showing here.
here the after build screenshot, as you can seen the path is the same but images are loading properly
I found out the solution of this problem, By changing into my nginx file, Because /images/image_1.jpg is relative path and it'll be finding the image on this url like so www.xyz.com/images/image1.jpg.
Website doesn't have any route define like that so wasn't getting the image.
I just changed my nginx file and add location / images section.
root /var/www/html/zinpro-frontend/dist;
server_name hk2.zinprofirststep.com;
error_page 404 /;
location /images {
alias /var/www/html/zinpro-frontend/dist/images;
}
Just started using Nuxt, and I love it so far. I just have one specific issue, I'm using prismic.io as headless CMS for my personal page. I have a few pages and a "blog" page. I'm having an issue when navigating to the blog route, it returns page not found. Now, it's kind of odd because it's working perfectly in my local host, it's just behaving that way when deployed.
Site's being deployed on Netlify.
I already tried switching the route's links and building the project on my local machine and it's working like charm.
Link to site:
https://wonderful-gates-27a024.netlify.com/
This is my file structure for the pages:
Pages/
-- blog/
---- _uid.vue
-- About.vue
-- Blog.vue
-- Contact.vue
-- Works.vue
-- index.vue
Steps to replicate the issue
Navigate to about
Navigate to contact
Navigate to blog (Sometimes the error shows on this step)
Click on an article
Navigate back to the blog (here it should display not found)
Steps to navigate back to blog after the error shows up:
On the url bar, paste wonderful-gates-27a024.netlify.com/blog and hit enter.
I'm getting page not found error
It works sometimes because you are navigating to
https://wonderful-gates-27a024.netlify.com/blog/
Which is different from
https://wonderful-gates-27a024.netlify.com/blog
the page which is /blog
https://wonderful-gates-27a024.netlify.com/blog
doesn't exist while the page
https://wonderful-gates-27a024.netlify.com/blog/
exists. which is /blog/_uid
so if you want it to work make
Pages/
-- blog/
---- _uid.vue
---- index.vue// make this file and the /blog will work
-- About.vue
-- Blog.vue
-- Contact.vue
-- Works.vue
-- index.vue
We just had this error occur and it was caused by renaming About.vue to about.vue on a MacOS machine.
Git doesn't recognize it as a new file, so when you deploy the app on a Linux machine, the problem occurs.
The solution is to rename the file from a Linux machine, so that git recognizes it.
You could also probably accomplish it by renaming the file from Blog.vue to new-blog.vue and then renaming it again to blog.vue.
This is all caused by the fact that files aren't case sensitive on MacOS but they are on linux. You will see it where you have:
<NuxtLink :to="{ name: 'blog' }">
It must be blog.vue to match the route name because the filename leads to the route name. On Linux, the crawler will name the route "Blog" if it is Blog.vue.
You don't want uppercase filenames with nuxt, because they will lead to URLs such as /Blog. I don't recommend having uppercase in your pages directory.
We've now released the updated nuxt-prismic module to solve this dynamic routes issue and enable previews. You see how to migrate your project by following this article:
https://prismic.io/docs/vuejs/getting-started/the-new-prismic-nuxt-module
Also you can see a project enabled with the module already here:
https://user-guides.prismic.io/en/articles/2831943-nuxt-js-sample-multi-page-website-with-navigation
I want to get the content remotely for a html page and open locally in the webview. But I want this html to have access to the Ti namespace, so it implies that the html must be running locally.
Have tried to create the webview passing the content as the "html" parameter, but Ti namespace doesnt work that way.
Then, I tried to write the content to a html file on Ti.Filesystem.applicationDataDirectory. The page opens OK, but the Ti namespace doesnt work on the html either.
Finaly, I created a html file in assets folder on the project and when I get the html code I try to write on it so I could open using 'url' : '/myfile.html'. But when I try to write it gives java.io.IOException: read only
How can I achieve this? Again: I'm trying to get a html content remotely and run locally so I can have access to Ti namespace.
Thanks
I messed up during my testings. Downloading the html and then opening the webview passing the html code to "html" parameter on the webview works just fine. The fireEvent works that way inside the html.
It was not working because it was other problem not related that I fixed.
Upon invsetigating 'mu is too short's answer to this question, I noticed that I get different behaviour in jsFiddle than in my local context for the exact same script. Any clues as to why that is?
Note:
I am not getting any javascript errors in Firefox's error console in the local context.
UPDATE:
I tried grabbing the HTML from fiddle.jshell.net/ambiguous/ZEx6M/1/show/light to a local file and loading that local file in Chromium browser and I got the following errors in the javascript console:
GET file:///css/normalize.css undefined (undefined) /css/normalize.css
GET file:///css/result-light.css undefined (undefined) /css/result-light.css
Resource interpreted as Script but transferred with MIME type application/empty jquery.scrollTo-1.4.2.js:-1
Resource interpreted as Script but transferred with MIME type text/plain jquery.viewport.js:-1
I can get rid of these javascript errors by downloading the files and modifying the <script> tags, but it doesn't solve the problem. The page still scrolls down to the very bottom. Also these errors appear even in the working (jsFiddle) version.
I also tried the same process in Konqueror. Result: the script does absolutely nothing.
Don't use separate files for CSS and javascript. Just bring everything into HTML file (using inline javascript and inline CSS) and you should be OK.
Or, run a web server locally to serve the javascript file (with the correct MIME type) and use relative paths to CSS.
I tried to use an image file in my HTML template. But when I run the server and open it in the browser the image is not getting loaded. But if I run the HTML file individually it's working fine. I mentioned the path of images folder in file settings.py, MEDIA_ROOT, also. Still it is not working.
settings.py:
MEDIA_ROOT = 'C:/Users/Vicky/Documents/Django/krish/media/images/'
HTML:
<img src="../media/images/Untitled.jpg" width ="267" height="122">
I also tried giving:
<img src="Untitled.jpg" width ="267" height="122">
How can it be made to work?
I had this problem when I started Django too :)
The Django server does not serve static files by default. Usually you need to use a separate server for this, but in a development environment you can use a shortcut.
Add this to your urls.py:
if settings.DEBUG:
urlpatterns += patterns('',
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': '/path/to/media'}),
)
Don't use this in production. It is slow, unstable and insecure.