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.
Related
i am trying to use nuxt-image on NUXT3, but it seems it doesn't work with the generate command. Images work during dev, but get a 404 when using nuxt generate.
in my nuxt config i have
modules: ["#nuxt/image-edge"],
image: {
dir: "assets/images",
},
then in my files i have
<NuxtImg
format="webp"
class="mobile"
src="/website/home/above-fold-illustration-mobile.png"
alt="illustration"
aria-hidden="true"
/>
So i am wondering if anyone else had a problem or if this is just a compatibility issue with nuxt-image and nuxt3 generate
this is not yet supported, waiting on https://github.com/nuxt/image/pull/614
Reading this part of the documentation
For static provider, if images weren't crawled during generation (unreachable modals, pages or dynamic runtime size), changing dir from static causes 404 errors.
There are other few bugs if you change dir to something else than static apparently.
Can't you stick to static? Will probably avoid you quite some issues IMO.
I'm using amazon s3 as CDN, everything is working fine when I run the application using 'yarn dev'(domain added to next config). If I check inspect I can see the following value in the src attribute of the img element:
src="/_next/image?url=https%3A%2F%2Fcf-simple-s3-origin-gallery-hior-021672050205.s3.us-east-2.amazonaws.com%2FslidesImages%2Flogo.png&w=640&q=75"
When I'm running 'yarn build & yarn start' the src attribute set as the following:
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
which causing the issue loading the images, what am I missing here?
I was able to find the root cause for that issue(also reproduced with static images).
I added an unnecessary config variable inside the component which disabled the React client-side and causing the loading issue.
export const config = {
unstable_runtimeJS: false,
};
though this is probably not the issue, I had a similar problem, just make sure that if you are using ReactJS to have className instead of class
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">
(MacBook Pro Mid 2015 / OS X Yosemite 10.10.5 / Safari 8.0.8)
I want to change background-image of a particular webpage.
I made a Safari Extension and make such a css file as style.css
body { background-image: url('background.png'); }
I also put background.png to the same directory with style.css
And Safari Developer license is already set.
Then, in Extension Builder, I set some properties as follows:
Extension Website Access: All
Injected Extension Content:
Style Sheets: style.css
Whitelist: http://__mywebsite__.com/*
Although I installed this, background of my webpage didn't seem to be enabled.
I think the solution must be these:
Safari Extension can't find a local file background.png
I set wrong whitelist pattern
I set wrong parameter to Extension Website Access
What should I do? Any comments would be thankful.
What happens if you link to an image on a web page, does it work? try putting this link in and see if it works: http://dummyimage.com/600x400/000/fff
If it does then the problem is with the directory or one of the other things you mentioned
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.