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
Related
I am uploading images using multer in a folder and save the path in MongoDB. However, when I try to use that address to show the image in react, I get a blank page (rendering error).
So, something like <img src={require(shop.image)} /> gives me a blank page.
Here is the .jsx code
shops.map((shop, key) => (
<div className="shop" key={key}>
<img src={require(shop.image)} alt="" />
<div className="shop-content">
<h1>{shop.name}</h1>
<p>{shop.street}</p>
<p>ID: {shop._id}</p>
<button onClick={() => { changeEdit(shop) }}>Edit</button>
<button>Delete</button>
</div>
</div>
)
)
Here is an image with a document from the collection
This is the error that I get
This is the directory tree
Generally speaking, what do I have to do in order to fix my problem and be able to show these images without getting a blank screen?
If I put the the directory as a string ( src = {require("../../../")} ) it works perfectly. So the address is correct, but react still won't show my image.
I have fixed it. I have used my server side to host my images and get links of them by serving the local files, using app.use( "/directory", express.static("directory")) and now I can easily access and render any image by using links like localhost:3000/shops/image.png etc...
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}}" />
How to make the above codes work by using one <img>. I mean I want to use only one <img> but the conditions are the same. For now I'm using 2 img for condition and it's not good. How can I make it to use one img only. Any help?
<img ng-if="!image[$index].dataUrl" ng-src="/upload/image/rotation_banner/{{row.Image}}"/>
<img ng-show = "image[$index].dataUrl" ng-src="{{image[$index].dataUrl}}" />
Try this out:
<img ng-src="{{image[$index].dataUrl ? image[$index].dataUrl : '/upload/image/rotation_banner/' + row.Image}}" />
Hope this helps.
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!