I just started using google app engine. In order to use templates, I'm using jinja2.
I want to add images dynamically after I set the width and height of the img tag. I used
PIL in order to read the image size and put the one I want.
However when I open the image with PIL, I need it not to be in a static_dir
and to put the image in the img tag, I need it to be in the static_dir.
As a testing solution I've copied the folder to see if I get results and I did. But as
you can see having each image saved twice is kind of bad.
If you want the file to be both static (served fast by not having to pass through your app) and available to the app, note the application_reabable option in the description of static file handler patterns. It does want you want without you having to duplicate files.
Related
I am trying to import image from 'images' folder inside 'home.js' file which is inside components folder. I tried many combinations of '../' and './', but image doesn't load on page. There is probably something wrong with a path.
Since you are using React, did you check if the component is even being rendered to the view at all?
Additional factor could be your applied classes 'home-wrapper' or 'backImg'
I usually add some placeholder text to check if it pops up.
Regarding to Omars answer, that's right you would only need to go back two directories to access that image, like so
<img src="../../images/astronaut.png" alt="astronaut"/>
When you provide a relative URL, it has to go from the URL of the HTML to the URL of the image.
You are trying to go from the file path of the JavaScript file to the file path of the image.
Since the image is not in the public directory, it is quite likely that the image doesn't even have a URL in the first place.
There are two basic approaches you can use to determine the URL here.
Manually
You need to put the image somewhere it has a URL.
How you do this will depend on the HTTP server you are using. You will need to ensure that the image has the same URL (or at least one relative to the HTML document) in both your development and production environments.
For example, you could put it in the public directory, then say src="public/images/yourimage.jpeg". (Note that I'm making assumptions about how your development server allocates URLs to files in the public directory here).
Use your bundler
Typically when using React (as you appear to be doing) you will use a tool like Webpack to generate a production ready version of the site. This will do things like removing slow debugging routines, tree shaking to remove code from modules that isn't being used, and so on.
Webpack has features for handling images so once you set up the configuration file to support it, you can then do:
import MyImage from '../../../images/yourimage.jpeg';
and
<img src={MyImage} alt="etc etc" />
Note that the path here is relative to the JS file and that you need to use {} to assign a variable's value to src.
The correct syntax in react is:
import astronaut from '../images/astronaut.png';
<img src={astronaut} alt="logo" />
I'm new to Sparx EA (Currently running 14.2 and 15.2), and really like the HTML report, which we host on SharePoint to serve to customers. However, AFTER running the HTML report, I go into the created html folder and make modifications to files, which include: Modifying the index.html to replace the ea.png file to display two logos; one on the left AND one on the right, Modify the ea.css file to modify the iframe sizes to accommodate the larger sizes of my two logos. I also change the header background image to an image that completely fills the header iframe.
This serves us just fine, but does require and handful of manual changes to the html before posting.
I've only just discovered the ability to select a manually created "style" templates! However, I'm unable to resolve a couple issues that I would like to be able to resolve without manually manipulating the html after creation.
How can I include referenced images, either from the file system OR the image library?
For example: in the Page-Index template, the image source is #HEADER_IMAGE#, this (of course) is resolved from the "Header Image:" prompt in the "Publish as HTML. However, if I would like to use a logo that is in my image library, can I overwrite the "#HEADER_IMAGE# with something to the effect of "#IMAGES#/myLogo.png"? And to also have that logo file included in the images folder of the generated HTML report? Ideally, as I have two logos, one automatically works by the "#HEADER_IMAGE# then other by "images/Logo2.png" is there a way to define a "#HEADER_IMAGE_2#" that would allow me to reference that second logo, and work like the original "#HEADER_IMAGE#"
I would also like to change the CSS-MAIN .IndexHeader background-image: url(../images.hgb.gif) again, to an image I have in either a file on my file system or one from my image library in Sparx.
In my testing of this, I'm able to make the references as "images/logo1" , etc. but then I have to manually move the file into the images folder as sparx does not do so (though it does a great job on doing so with the #HEADER_IMAGE#)!
Appreciate any assistance on this.
I have an html file in which I would like to display an image called plot.png with the line <img src="plot.png" alt="Stock price vs. predictions graph">. On my website, I only see the alt text, meaning that my image did not load properly. In my command prompt output I see that I have a get request to /mysite/home/AAPL/plot.png, which is extremely frustrating because this means that when I search for the image this code is just placing it in the url (which is localhost../mysite/home/AAPL). I have tried putting plot.png in the same working directory as my html file as well as trying the absolute path to plot.png starting with C:, but nothing seems to get the search out of the url. Please help, thanks!
If it helps, im using Django
You can put the image in the same working directory (in the same folder as your html file) and then use
<img src="./plot.png" alt="Stock price vs. predictions graph">
The "./" is important as it signals that the image is in the current folder.
You could also use a website like www.linkpicture.com to generate a link to host your image and then use that link in your img
Some web browsers automatically disable images from loading. Fixing this could be as simple as selecting “show all images” from the browser's settings menu. It's also worth checking if the device you're using has security software or extensions that could block images.
Again you can use this tag for .png type photo
<img src="exampel.end">
//use extension type .end instead of .png
I forgot to mention that I was using the Django framework and the html templates work much differently than regular html files do. In Django you must put the image in a static folder and then call if with Jinja like so: <img src="{% static 'mysite/image.PNG' %}">
We have a wiki that was brought back from the dead using a torrent image archive of 32gb+ (that's compressed).
We ran importImages. That created sub-directories, probably from the image paths of the wiki articles.
Well, we have a lot of images not loading correctly (white space).
Turns out the importImages did not move all the images into their correct subdirecotires.
When you look up the image, it will have the expected sub directory i.e. images/1/1a/hello.jpg
But, the actual file is still in images/hello.jpg.
If you try to reupload the image using the single file uploader, it gives you an overwrite warning, ignoring this warning corrects the image, and stores it in the right subdirectory. But we have 200k+ images, and you cannot overwrite images using uploadWizard.
Is there a way to fix this? A parameter we can run, or a way to set all image paths to use just .../images/?
We are using version 1.35.1
Perhaps, $wgHashedUploadDirectory or $wgLocalFileRepo is not set correctly on LocalSettings.php. If this is not the case, try to launch importImages.php with --overwrite option.
I am trying to include some images in a Genshi template for my Trac plugin, but it always shows only the alternative text because it cannot find the images.
I have the following (X)HTML code:
<div>
<img src="file://c:/path/to/image.png" alt="asdf" />
</div>
When I use this code with a simple html file and open it in the browser, the image is displayed correctly, which means that both the path and syntax are correct.
But when I insert the code snippet into a Genshi template and use it within Trac, the image cannot be found. However, when I look at the HTML source code in the web browser and copy the URLs into a new browser tab, it is again displayed correctly. This means that only the server cannot find the image.
The images are in a directory inside the python-egg file, and the path points directly to the directory created by Trac, which also contains my CSS and HTML files, both of which are loaded correctly. The images are correctly referenced in the setup script which creates the egg.
How do I have to reference images in (X)HTML documents when using them with a server?
Is there a special way to include images in Genshi documents? (I haven't found one.)
Thanks to the comment of RjOllos and this site I was able to fix it by trying all of the URL types. Although it says for a plugin to be /chrome/<pluginname>, it was actually just /chrome that worked. See the edit below! So the full URL is then <ip>:<port>/chrome/path/to/image.png.
EDIT: I discovered I actually used the /chrome/pluginname version, just that I did not use the name of my plugin as "pluginname". See my comment below. It seems like /chrome/pluginname should actually be /chrome/htdocsnameor something like that, in case you use a different name rather than the plugin name when implementing the ITemplateProvider. In my case I called it images, which was the same name as the folder. END OF EDIT
Another mistake I made was forgetting the initial slash (chrome/path/to/image.png), which caused Trac to assemble the URL to <ip>:<port>/<current page>/chrome/path/to/image.png.