We Keep Coding

I cannot get images in the images folder in react

I'm trying to do a memory card game with react. I can't get the photos in the img folder to app.js.
I wrote the photos in appjs like this.
I have defined a url for pciture but the pictures are not visible.

smurf is Array, try this:
...
return smurfs.map(smurfData=>(
<img src={smurfData.pic} alt={smurfData.name}/>
));

<img src={require(`${url}/${smurf.id}.png`)} alt="smurf" width="100" />
You should be able to display it if the URL is correct.

could you check what your smurf.id holds? can't see it's definition in the code attached. also, seems from the part code that you want to do either smurf.name or smurf.pic?
Separately, this works for me
src={require('../images/flex.jpg')}
you're probably missing the 'require' if the image path seems correct to you

Set image src to a url in javascript

I have an image in my page. I want to change it's src in a script tag.
this is code :
<asp:Image ID="ImgSecode" runat="server" ImageUrl="~/CImage.aspx" CssClass="lblSec"/>
in page CImage , an image will create.
it works.
but when i want to change the picture in script tag,it doesn;t work.
here is javascript code :
document.getElementById('<%= ImgSecode.ClientID %>').src = "CImage.aspx";
In addition when i set the source to an image which is in solution it works.
Can you help me what should i do?

Assuming you use strictly JavaScript based solution you need to use SetAttribute method like this-
document.getElementById("<%=ImgSecode.ClientID %>").setAttribute('src', '<Full Web Path of your Image>');
Or if you are open to Jquery as well the use .attr.
$("[id='ImgSecode']").attr("src", "<Full Web Path of your Image>");
Also as per your question setting .aspx to src is by mistake I guess.

lightbox2 unsafe data image

I am trying to use lightbox2 with a data URL which is dymacilly set by Angularjs but for some reason it's not showing the image. In my console I get an error showing the data URL I set dynamically with ng-href but "unsafe" is prefixed to the url.
Anybody has a clue why this happens? I already added "data" to the white list of Angular and I also see that in the DOM the href is correct.
config(['$compileProvider',
function ($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data):/);
}]);
There is no "unsafe" prefixed only when I click on the link I get this error.
The error that I get in the console looks like this:
unsafe:data:image/png;base64,net:{the base 64 string}:ERR_UNKNOWN_URL_SCHEME
My link looks like this:
<a ng-href="data:image/png;base64,{{schedule.flyer}}" data-lightbox="image-1" data-title="My caption" >
If I add the base64 string directly in a normal href it works fine. Does anybody know how to get this to work?

I think that you should use the aHrefSanitizationWhitelist method per https://docs.angularjs.org/api/ng/provider/$compileProvider

The problem was that I configured the wrong white list. I should have used the following code:
config(['$compileProvider',
function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data):/);
}]);

Fetch href Value from HTML File via Javascript

I have this Problem.
I am using Grid.js (http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/)
And now I want to add a Lightbox with multiple thumbnails inside the dropout.
Grid.js has an function where it puts all the content into the dropout, so I thought I may use this function.
this.$href = $('<div class="image-row"><div class="image-set"><a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" title="Click on the right side of the image to move forward."></div>');
I shortenend the code, its very long (not very pretty I admitt), now it shows on the dropout, but I need for each Dropout a new set of images.
Is there any way I can fetch the href="" data out of the HTML? Or another, more practical way to do it?
I admit I have absolutly no clue of JavaScript.... I hope someone can help me! Thanks in Advance

In jQuery you can use $('.example-image-link').attr('href');

jQuery's load() doesn't display images

Good evening everyone,
I am using a JavaScript to load/override content from an HTML-File into specified divs.
You can watch a demo.
The javascript that does the load job looks like the following:
function loadScreenie(elementSelector, sourceURL) {
$(""+elementSelector+"").load("img/screenies/"+sourceURL+"");
}
and gets invoked by a hyperlink looking like this:
mibmib
( i have also tried the same with onclick="")
This is the content of screenie2.htm
hello world<br />
<img src="screenie2.png" />
The problem is that images are not displayed. The behaviour is like this:
- you click the link and the javascript is executed.
- the text in screenie2.htm is displayed correctly in the correct div
- the image is not displayed. there also isnt any broken image symbol or an empty space.
Do you have an idea what could cause this error?
Thanks a lot in advance,
-- benny

Ok. Let me conclude to you what is happening here.
When link is clicked, jQuery loads "img/screenies/screenie2.htm
The image-tag <img src="screenie2.png" /> is inserted into the DOM.
So, we have an image linking to a supposed image at ./screenie2.png, where you would believe it should be linking to *./**img/screenies/**screenie2.png*.
You need to use absolute URLs in your load():ed content.

If you're testing with IE, the problem might be that Jquery uses innerHTML instead of creating individual dom elements with the load command. IE can be very finicky about that.