I'm trying to add images to my hello world app (HTML / JavaScript).
I am able to add the standard images (logo.png, smalllogo.png etc), but adding:
<img src="images/testImg.png"> won't show, when testing the app.
The image is located in the images folder, but won't show. What's wrong here?
Apparently the image needs to be added by clicking "add->existing item->image". Then it gets loaded and will be available in the app.
Related
I'm creating a modal in the app.html file of my Nuxt project that tells IE users that they should change to a different browser with links to 3 browsers they can download. The modal is displaying but no matter how I try and reference the images I get a 404 not found error. I have the 3 .png images in assets/images.
I tried referencing them in different ways (including ~/assets/images/imagename.png) but no luck.
Any help would be appreciated
Please have look at original Nuxt documents once.
with img tag
<img
src="~/assets/images/about-us.png"
>
I'm working on a react app. Everything works fine in development. When I make build using npm run build and test it then some images on page are shown and some images are simply not found. I can see that user avatar image is shown but all other images are not shown. I inspected code in browser and checked src of image. Path is good and image is also available in ./static/media/card-1.7a6bc100.jpg but not showing on page. Then I inspected code of user avatar image, src looks similar and that image is working fine. I'm not sure why its behaving like this. Below is my source code looks like.
import marc from "assets/img/faces/marc.jpg";
And then my img tag looks like:
<img src={marc} className={imgStyle} alt="..." />
it always spits out ... these dots which means image is not loaded, but image is available there and path is also perfect when I inspect this image in browser. Can anyone help me why it is doing this on production? It's been hours while working on this but didn't found any solution.
Any help will be highly appreciated.
Thanks.
If you are using create-react-app, assets will also need to be served inside src. You should also reference the image using relative path, not absolute path. For example:
image is under src/assets/img/faces
your code is under src/some-folder/your-code.js
// your-code.js
import marc from "../assets/img/faces/marc.jpg";
Put your images in public/images/ folder and use like this
<img src="/images/logo.png" className={imgStyle} alt="Logo" />
I'm new to Photoshop scripting and javascript. How can I read via code the image inside the active window in Photoshop CS5-C6 and paste that image into a web page DIV?
FYI I'm a complete newbie to programming. My goal is to build a simple Mac App prototype with a wrapper running a web app inside. That web app needs to connect to Photoshop via TCP and read the image inside the selected window document and then paste it somehow into the web app's html. (Photoshop has feature inside the edit menu called 'remote connections' that converts Photoshop into a server and allows any external applications to read/write stuff inside Photoshop by sending javascript over TCP)
So, how can I:
1) Access Photoshop over TCP via javascript?
2) How can I get the image inside the active Photoshop window and paste into the web app?
I might need some additional information to help more accurately, but if I understand correctly I'd say you are running your code on your local machine.
Please post the development environment you are using (Visual Studio, eclipse, etc.)
First Approach
You will want to save you Photoshop image and add that file to your project. Just in case, I would recommend actually moving the image into your project folder first.
So, if you saved the image to "C:/Username/Pictures" - move it to "C:/Documents/Visual Studio 2010/Projects/MyWebPage"
Once you've done that, just add an IMG tag and the file path. If you moved the image into the project folder, the path should just be the filename:
<div>
<img src="myPhotoshopImage.gif" alt="Image">
</div>
You can put whatever you like inside the alt quotations (""), it doesn't effect the way it works. You can also specify the dimensions by adding height and width (this is optional) like so:
<div>
<img src="myPhotoshopImage.gif" alt="Image" height="260" width="420">
</div>
Second Approach
If you don't want to worry about managing your image files in your project, you can choose to host them online.
First, save your imagine in photoshop. Then choose an image hosting service. I would suggest ImageShack for an easy start. I would also suggest creating an account to keep track of everything.
Log in to ImageShack and go to the "Media Upload" tab. Click the "Browse" button and locate your image. Click OK. If you want your image to appear the same as it looks on your computer, make sure "Do Not Resize" is selected. Finally, click "Upload Now" & "Continue to Image Links" on the following page.
You will notice they have generated an HTML link for you already, which will work - but will also act as a link to ImageShack if clicked on. If you want to avoid that, just follow the same pattern:
<div>
<img src="http://img541.imageshack.us/img541/2232/123vm.jpg" alt="Image" height="260" width="420">
</div>
You'll need to do some research on any other actions you want the embedded image to take. A great place to start is W3Schools.
Edit - Forgot to mention... If you are wanting to use some javascript functions to work with the image, give your image an "id" attribute:
<img src="something.jpg" alt="whatever" id="headerImage">
You can now access the image via javascript:
function foo() {
var myImage = document.getElementById("headerImage");
myImage.height = 1000;
myImage.width = 832;
};
Also, if you are having any trouble, make sure your image is saved as a common filetype (not .psd)
There is a python wrapper for connecting to photoshop called photoshopConnection
One thing you can do is get the actual file info from PS and then copy the file itself into the webapp. I do not think the photoshop server supports streaming data in the fashion you are looking to.
I'm creating an image gallery using the Galleria plugin.
I'm customised the styling of the gallery, editing css within the .js file, but there's one task that's got me stumpted:
I'm trying to replace the arrows that appear on either side of the image lightbox. They are currently created using type, but I need to replace these using images to be consistent with the rest of the site.
I've tried adding the images as I normally would using CSS, but it failed to display.
I'm not very experienced with Javascript so any tips on how to call images in CSS contained within Javascript would be gratefully received.
Here's a link to the code from the Javascript:
http://jsfiddle.net/tomperkins/TQDU7/
And here's a link to the plugin site if that helps:
http://galleria.aino.se/
Thanks in advance,
Tom Perkins
You just have to edit the "classic-map.png".. just make sure you map them in the same way ( put your button images at the same spot as the once already there )
Hi I want to find a module or a js script to embed to drupal that can show me all the images uploaded to a node (CCK fields as images) and when I click on one to load that image as the highlighted one (big picture) just like in the following layout.
Can anyone tell me if such a module exist?
or
an image has to be loaded by default
I believe the Fancy Slide module can do what you're looking for. If not, there are other Rotator/Slideshow modules that may.