I want to load img in ReactJS. But I can't put url img in require.
Note: const 'Photo' is url link of picture.
Any help will be appreciated..
Thanks.
This is the directory structure and 'photo' = "./upload/xxxxxxxxxx.jpg"
enter image description here
You can require with expression.
So, this should work:
<img src={require('./upload/' + fileName)} />
The first part inside require is directory and the second one is fileName e.g. my-image.png.
Or there are various other ways to handle dynamic requires: map, switch
Related
The task is simple: display a local image in a reactjs app based on dynamic data.
This is what I tried (assume path_to_image is derived dynamically):
<img src={require(path_to_image} />
generates an error:
Error: Cannot find module '../../images/logos/somelogo.jpg'
Without the require:
<img src={path_to_image} />
generates a broken image.
These two methods seem to be what people are doing, but no luck here. How do I solve this?
import image from "./path/to/image.png"
If you plan using more images in a dynamic way maybe you should store their paths in a db and then query the db for the respective path. Actually that's how it's done with a CMS for example. Even if you store the files on the same hosting, you would still save their paths to a DB instead of hardcoding.
Use this:
import SomeLogo from '../../images/logos/somelogo.jpg';
You can then use it like this:
<img src={SomeLogo} />
As for multiple images, you could store them in a JSON array, and then loop through them and add each image.
This does it:
let imageSrc = require("../../images/logos/generic.jpeg");
let dynamiclyGeneratedSrc = ...;
if (dynamiclyGeneratedSrc !== undefined) {
imageSrc = require(`../../images/logos/${dynamiclyGeneratedSrc}`);
}
Trying to pull an image from Umbraco and display it using React.
I can pull all the text by doing this for example -
{String(this.props.data['carouselUnderImageText'])}
{String(this.props.data['carouselLink'])}
But when doing an image -
<img src={this.props.data["carouselImage"]} or <img src={String(this.props.data["carouselImage"])} />
Those two won't work, it seems to return me the url umb://media/8990dd19cfb746e0bea4baec5df20d01
Any ideas on how to solve this? I have not found enough documentation to fix this issue when using Umbraco with React.
If there is anything else I can show in order to help answer this question just put it in the comments and I will update the question.
Many Thanks in advance.
You can get the IPublishedContent of the image file by using the TypedMedia function in the Umbraco Helper, you can then access the images URL to be passed through to react.
var umbracoHelper = new UmbracoHelper(UmbracoContext.Current);
Udi.TryParse(carouselImage, out var carouselImageUdi); // this parses the umb://media string into a UDI to be used in TypedMedia.
var imageUrl = umbracoHelper.TypedMedia(carouselImageUdi).Url;
I have images in a folder saved as the users name. I want to display a clickable image from the (name of user).png. Using AngularJS
This is wrong but this is what I mean, I know I cannot use src with a function in it:
{{currentUser.name}} //the function
<md-button ng-click="Popup()"><a><img src="{{currentUser.name}}.png " width="200" height="200"></a> </md-button>
currentUser is a function ?
you're using it as an object. share your javascript.
Try using ng-src instead of src. :)
Change the src by ng-src.
Checkout the manual about ng-src:
https://docs.angularjs.org/api/ng/directive/ngSrc
I am using nervgh/angular-file-upload to let the user take a photo from his mobile phone camera and upload it. It works fine, but now I want to display the image too. Of course I could add that functionality to my backend and just use the img-tag and point it to the URL. But since I upload the my JavaScript file already has to have the file at some point, right?
How do i display it?
I tried it like this:
<img ng-src="data:image/JPEG,{{uploadedImage}}">
but couldn't get it to work. According to the wiki of angular-file-upload I have control over an "FileItem", but I can't seem to figure out where the actual file-date is stored.
So my question is: Is it possible to use img tag with ng-src to display a file that is directly stored in JavaScript as byte array and where does angular-file-upload store the actual array-data
You need to make use of ngf-thumbnail option
<div|span|...
*ngf-thumbnail="file" //Generates a thumbnail version of the image file
ngf-size="{width: 20, height: 20, quality: 0.9}" the image will be resized to this size
// if not specified will be resized to this element`s client width and height.
ngf-as-background="boolean" //if true it will set the background image style instead of src attribute.
>
Take a look at this fiddle Click Here
<img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb">
This line is helping us to show a thumbnail of the image being uploaded by the user, you can choose different html tags as suggested above. You have to link the image using the file name, the ng-model in that case is picFile and that is being used as ngf-thumbnail.
You can use your own css on it as well.
you could use fileReader.
bind the ngModel file then convertit to base64 and use it as the image source
var reader = new FileReader();
reader.readAsDataURL(scope.ngModel);
reader.onload = function(readerResult) {
$scope.$apply(function(){
$scope.mysrc = reader.result;
});
};
How to generate 'a href="javascript:void(0)"' like link in CakePHP?
I make an application, the content will insert into the editor textarea when user click a list of image. I add a class to these images and write some code in the javascript file. Everything is going well.
But the link of the image is a URL address, but not 'href="javascript:void(0)' like URL. Anyone could tell me how to make it in CakePHP?
Thanks in advance!
<?php
echo $this->Html->link(
'/path/to/image/',
'javascript:void(0)'
);
?>
You can either set a path to the image or use the Html helper to generate the image tag code. The second parameter will set the href.
Don't believe there is any dynamic way, however when you are creating your form element you can set it in the options array 'href' => 'javascript:void(0)'