I tried using
<img src="file://C:/Users/JOHN-PC/Pictures/test123.png" alt="Logo"/>
in reactjs but the pic is not loading.
Add /// like below, this might help
<img src="file:///C:/Users/JOHN-PC/Pictures/test123.png" alt="Logo"/>
Related
I am new to React with only about 4 months of experience, and I am facing a problem when referencing a group of images in the same directory as the code below, in order to render them on the webpage. I am getting a module not found error whenever I pass their paths from the JSON file (as an object, but still a string nevertheless) and everything works fine when I pass a single path through my function
this is the code for rendering the images one by one.
<div className="cards col">
{Pagedproducts.map((item) => (
<div id="card" key={item.id}>
<div className="image">
<img
className="prev"
src={require(item.preview)}
alt={"Image not rendering"}
/>//item.preview returns a path for the image from this file's perspective
</div>
</div>
))}
</div>
using this same code but passing the path right away and rendering the same pic on all items WORKS! but i logged the item.preview variable and it literally shows the exact same path passed to the require function.
<img src={require('./productPic/IMG-1.jpg')} /> //doing this works fine but it's not what i'm trying to do
I am aware of the other methods that try to solve this but none of them use an object that holds a path to the image.
when i run my code i get a Module not found error
Uncaught Error: Cannot find module './productPic/IMG-1.jpg'
I also tried making it a string and passing the variable in it as such
<img src={require(`${item.preview}`)} />
yet also this does not work.
After React code is compiled, it will look into the /public directory for any images.
put your photos into the public folder and it'll work.
Here is the working example. codesandbox.io
Currently, i'm buiding my rich text editor with quill and i need to create an embed for images. Before quill, i used to use redactor and i try to move to redactor. But, i already have 2 version of data from redactor before where the users is already uploaded images.
Version 1:
<p>
<img src="http://lorempixel.com/400/200/" data-image="5bb71bdc65465e0675ba" class="img-fluid img-responsive">
</p>
Version 2:
<figure>
<img src="http://lorempixel.com/400/200/" data-image="1bdc65465e0675ba1b2b" class="img-fluid img-responsive">
</figure>
Expected behavior:
I expect to replace the p with figure on initial parsing in quill. So, all the images have same parent figure
Actual behavior
figure is always deleted by default
I tried to register figure with blots/block/embed but i can't check and add the figure if the image doesn't have figure on its parent
Thank you
I have an AngularJS project and I am trying to show an image from local folder.
My folder hierarchy is like this:
--app(folder)
-----controllers(folder)
-----services(folder)
-----views(folder)
--------images(folder)
-----------image1.jpg
-----------image2.jpg
-----------image3.jpg
--------persons.html
--------departments.html
--index.html
I have in image address in personsController.js:
$scope.fooImageAddress='images/image1.jpg';
and in person.html:
<img ng-src="{{ fooImageAddress}}" alt="here should be an image"/>
And nothing shows, just alt message if img.
What can I do?
I've read this question, this and this, and tried suggestions, nevertheless there is no result.
You must change your address, relative to your index.html file
So I suppose app/views/images/image1.jpg
it is look like wrong path from a controller the path is different:
$scope.fooImageAddress='../views/images/image1.jpg';
if is was from person page , you was right.
why are you using "ng-src" and not src if is only one image but use like that
<img ng-src="{{'images/'+imageName+'.jpg'}}" alt="here should be an image"/>
$scope.imageName = image1;
Please try this one, "fooImageAddress" is a parameters.
<img src= "assets/images/{{fooImageAddress}}" />
I have a lot of images that unfortunately have spaces in their URL's. These are submitted through user input in another system and saved to a database.
I'm having a problem with angular's management of image sources. It doesn't seem to like spaces or "%20" in the ng-src or src attributes.
This
<img ng-src="{{smallImg}}" alt="" />
Will output this
<img ng-src="" alt="" />
While this
HERE
will output this
HERE
Is there a way to do this without having to go back and rename all these folders?
I got the answer, it is working for me.
You can get this like:-
$scope.smallImg = "http://example.com/path to my/image with/spaces.jpg";
when you bind this do like
<img ng-src="{{smallImg .replace(' ','')}}" alt="" >
I haven't been able to make <img> src empty when using %20, but perhaps you're using an older version of Angular.
$scope.smallImg = "http://www.google.com/my images here/pic.jpg".replace(/ /g, "%20");
...
<img ng-src="{{smallImg}}" alt="Pic goes here" />
Here's a working demo: https://plnkr.co/edit/hTFw8rAg0CRxDGjROjjp
(tried to find an image on the web that had a space in the name, but no luck)
Well, as it turns out it was a secondary plugin, magic360 that was interfering with the image source
I have BB10 cordova app,
In view I have
<img ng-src="{{'someImageLink'}}">
And some local images not showing, there is blue question mark.
But if I will change to
<img src="someImageLink">
img works perfectly
Changing to
<img src="{{'someImageLink'}}">
not helping at all
Can't diagnose, do you mby have any ideas or know how to fix this issue on BB10?
You're close! Since Angular already evaluates the contents of ng-src, you do not need to wrap your expression in {{ }} braces:
$scope.imageLink = "image.png";
<img ng-src="imageLink">
After being evaluated, this will leave you with the equivalent of this, in the DOM:
<img src="image.png">
If you're using a hardcoded string to a local image file, and it will never ever change in your app, there's nothing wrong with using src="image.png" directly.
I hope this helps!