A straight forward image element does not seem to work in Ionic React.
I added an image in assets/images folder and gave the relative path in src of image element.
<img src="../../assets/images/image-1.jpeg" alt=""/>
I created a working example using CodeSandbox. Can somebody help me if I was doing anything wrong here?
Figured out the issue here. I had to put the images in assets folder which will be in public folder.
I moved my local image to public/assets/images/image-1.jpeg and then access that path in img element.
<img src="assets/images/image-1.jpeg" alt=""/>
Related
I'm very new in Vuejs and I have problem loading an img src that is outside the project.
I have an object with the img src and I'm trying to load the image in the HTML.
The img src in the object is: /assets/topics/adalovelace.png
When I take the image src from the object and use it statically it works
require(../../../assets/topics/adalovelace.png)
But when trying like that it fails:
require(`../../..${object.img}`)
and shows this error in the console:
"Error: Cannot find module './../assets/topics/camouflage.png'"
Here is my folder. Yellow arrow is where the assets are, Red arrow is where I load the img src.
Any idea what is wrong? I'm guessing its related to the path which is outside the project, but don't know how to fix it.
Thank you
Hi does anyone know why my png file is not displaying, even if i set it outside of the button element, it does not work.
I have used a JPG and it works but PNG is not, is there any obvious reason why PNG would not be showing up.
Here is an image of my code
Image of code here
First of all wrap the src in {}
Then if using Webpack; Instead of: <img src={"./logo.jpeg"} />
You may need to use require:
<img src={require('./logo.jpeg')} />
Another option would be to first import the image as such:
import logo from './logo.jpeg'; // with import
or ...
const logo = require('./logo.jpeg); // with require
then plug it in...
<img src={logo} />
I'd recommend this option especially if you're reusing the image source.
I don't know the full context, but assuming this React project is using webpack or was created with create-react-app, the image files in your src directory are not automatically being copied to the built application,
Try importing the image to the file where you use it:
import orbImage from "./org.png";
Then use it like so:
<img src={orgImage} />
I will try to help you,
on the other hand for your next message try to review the formatting inspire you from the other posts thx
for your png maybe probleme is your src
// The image.png file must be in the same folder as the JS file
// We import the image using its path
import image from './image.png';
and maybe try to add width="200"
I'm trying to use an image of a search icon on my site, but it's not loading. I keep making sure my directory to the image is correct and it all looks good to me. I am currently in my Navbar>Index.js file and trying to get to my folder assets/icons/search.png
<img src={require('../../assets/icons/search.png')} alt="Search" />
my directory
image not loading on my site
In React you have to first import the image before you can use it.
import Image from '../../assets/icons/search.png'
Then you can use it like this
<img src={Image} alt="Search" />
I have a Fancybox slideshow set up which is working perfectly for local images. Eventually when the site goes live, I want the client I am working for to be able to upload images to their Dropbox which will then be shown in the gallery.
I made stipulations that they must adhere to: the images to be contained in the first gallery must be named A1.jpg, A2.jpg, A3.jpg, etc... so my code can stay the same. All they have to do to update an image is replace A1.jpg with the a different image with the same name.
However this is not working. I have copied the link to the image for example:
https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg
Ive then read that the www needs to be replaced by dl to create a direct link to the image. This works fine when put into the Fancybox code:
<a class="fancybox-thumb" rel="fancybox-thumb"
href="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" title="image">
<img src="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" alt="" />
All works well up to this point, but if I copy and paste this code and replace 'a1.jpg' with 'a2.jpg' it wont link to the image. Duplicating the method above to get the direct link to the a2 image gives the following:
<a class="fancybox-thumb" rel="fancybox-thumb"
href="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" title="image">
<img src="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" alt="" />
If you notice the file name changes in the last directory before the image name (even though the two images are next to each other in the same folder in Dropbox). Im presuming this is a safety feature in dropbox to prevent unscrupulous types just changing the filename and being able to access all the images in the directory, but its proving to be a pain in the butt for me! Any ideas how I can rectify this?
Well no sooner had I posted this question, the answer came up!
On the Dropbox help page, it says the public folder was no longer created automatically on new accounts - instead theyve made it so you can share the link to any single file if you want to. This doesnt help as Dropbox also add some encryption to the link so that the problem I described in the original post occurs.
It turns out all you have to do is enable a public folder in the account (Dropbox still make this easy to do) and then the URL to the images are in a much more orderly fashion, such as:
https://dl.dropboxusercontent.com/u/264305025/a1.jpg
https://dl.dropboxusercontent.com/u/264305025/a2.jpg
https://dl.dropboxusercontent.com/u/264305025/a3.jpg
Changing any of these with an image of the same name updates the image linked to by fancy box. Simple!
I am working with some existing code and there is a preloader which loads some images for the navigation rollover state. It looks like this:
<body onload="MM_preloadImages('Images/Home-over.png','Images/Signup-over.png','Images/Costs-over.png','Images/Team-over.png','Images/Process-over.png','Images/Scholarships-over.png','Images/Login-over.png','Images/FAQ-over.png','Images/Contact-over.png','Images/About-over.png')">
An example of one of the nav items using the above is below:
<div id="Layer-15" class="Contact" > <img src="Images/Contact.png" alt="Contact" name="Contact" width="98" height="56" border="0" class="pngimg" id="Contact" onmouseover="MM_swapImage('Contact','','Images/Contact-over.png',1)" onmouseout="MM_swapImgRestore()" /></div>
Now all of the above is in the root folder.
When I go one folder deep, the nav breaks:
My code looks exactly the same as that posted above except that I prefix each reference to an image with '../', e.g. '../Images/Home-over.png' to send it back to the root folder first.
Unfortunately this does not work.
As nothing else is broken it seems to me that the images are not getting pre-loaded and this will most likely be because the image path is wrong.
However I'm not sure how it can be or how I go about figuring out the correct path?
All help is appreciated.
Thanks
The problem behind this was that the entire page code was getting duplicated due to a duplicate 'includes' statement in my php and this then prevented the styling of the nav bar.