We Keep Coding

vite react data-background in jsx not work

I can't show images at react vite and also jquery.js and main.js index.html too
<SwiperSlide className="slider-bg d-flex justify-content-center align-items-center" data-background="assets/img/slider/slider-bg-2.jpg">
can you help me solve this solution?

From the description I can only assume that you are not using data-background as a custom attribute and since I cannot find anything about data-background being anything but a custom attribute I can only assume it is not being used correctly. If you do not have a very imortant reason for using data-background I would suggest that you try this instead:
import importedPicture from './relative/path/to/picture.png'
<SwiperSlide className="slider-bg d-flex justify-content-center align-items-center" style={{ backgroundImage: `url(${importedPicture})` }}>

Reddit style voting system

Goal: Reddit style voting system
Two voting buttons (up/down), with the button that i have already clicked on a post indicates this e.g. by different background color. This should happen on page load based on database value and dynamically when I click it.
If I change a vote from up to down and vice-versa, both buttons should change.
Background:
As a base, I am using this plugin: https://janosgyerik.github.io/upvotejs .
It is basically running, and I managed to exchange the use of the .svg to show the arrows with text so that I can easily change what symbol to use for the buttons.
Problem:
With my limited knowledge, I am struggling for hours now to get the buttons to indicate the vote status on page load and to dynamically change them as mentioned above.
<div id="topic_{{$deal->id}}" class="topic pb-1 pt-1 pl-2 pr-2 upvote d-inline-flex btn vote-button border" data-id="{{$deal->id}}" data-votes="{{$deal->votes}}" >
<a class="upvote vote" data-value="1" data-id="{{$deal->id}}">
<span class="material-icons" style='font-size:24px;color:red' data-voted="{{$deal->upvoted}}" data-id="{{$deal->id}}">add</span>
</a>
<div class="count ml-3 mr-3" style='font-size:20px;color:red'>{{$deal->votes}}</div>
<a class="downvote vote" data-value="-1" data-id="{{$deal->id}}">
<span class="material-icons" style='font-size:24px;' data-voted="{{$deal->upvoted}}" data-id="{{$deal->id}}">remove</span>
</a>
<a class="star" style="display: none"></a>
</div>
I want to add the class "voted-toggle" to the span for the upvote or the downvote accordingly on page load and on click.
The "data-voted" attribute has value 1 for upvote, value -1 for downvote and 0 for no vote. The "data-id" attribute is the unique post id.
How can I achieve to add / remove the "voted-toggle" class to indicate which way the user has voted on page load and on click?

set src img tag in javascript

What the proper way to set src in img tag from js into asp.net? Because I try this way, it doesn't show up. The data from sql server and I'm using jquery and ajax to call the data. It's already show up in console but don't know why it be like that
In console
<img class="img-fluid px-3 px-sm-4 mt-3 mb-4" id="img" style="width: 25rem;" alt="learning" src="~/images/Capture205450514.PNG">
.js
let q = data[questionIndex];
if (q.img != null) {
$("#img").attr("src", q.img);
}
else {
img.style.display = "none";
}
.cshtml
<img class="img-fluid px-3 px-sm-4 mt-3 mb-4" id="img" style="width: 25rem;" >

Modify your src. You have not set it up correctly. If you are working with JavaScript, this is client-side and should be done this way.
<img class="img-fluid px-3 px-sm-4 mt-3 mb-4" id="img" style="width: 25rem;" alt="learning" src="images/download.jpg">
You did not mention what you are doing on localhost or not because you may need to
Absolute URL

All you have to do is to fix the Relative URL. Using ~ in URL doesn't make a valid URL.
If the images directory is at the root of your web application then use "/images/Capture205450514.PNG"
If the images directory is at the same level as of your HTML page then use "./images/Capture205450514.PNG" or simply "images/Capture205450514.PNG"
If the images directory is at one level higher than your HTML page then use "../images/Capture205450514.PNG"
Click here for reference

How to download images using javascript or jquery etc

What I want achieve
All I would like to achieve is that implement a file download functionality such as image files, text files etc... using javascript or Jquery.
estimated procedure is like..
① select a file
② click download icon
③ start download file ← here is my problem.
below codes are that I tried.
<a target="_blank" href="{{ f.file }}" download="{{ f.title }}" download><i class="fa fa-download text-secondary border p-2" aria-hidden="true"></i></a>
estimated browser
crome, firefox.
Any of ideas would be great.
※ so far, below code works fine except for image files.
<a href="<your_file_url>" title="{{ f.title }}" download></a>
Thanks.

Try:
<a href="<your_file_url>" title="{{ f.title }}" download></a>
Just be sure you give your file URL in href. You are using ‘"{{f.file}}"’. First check if {{f.file}} redirects to the right file URL.

Laravel - javascript not working but no error

I am now trying to use javascripts in my project. I searched all this morning on the Internet, and found nothing really clear about Laravel and Javascript.
Can somebody please explain how exactly (or link me from a known real example), can we make javascripts working on a Laravel project ? Thanks
Here's what i tried :
template_mynet.blade.php
...
{{ HTML::script('assets/js/jquery-2.1.1.js') }}
{{ HTML::script('assets/js/bootstrap.min.js') }}
{{ HTML::script('assets/js/bootstrap.js') }}
{{ HTML::script('assets/js/accueil_hover.js') }}
...
accueil.blade.php
#extends('template_mynet')
#section('content')
<div class="container">
<a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>
<a id="popoverOption" class="btn" href="#" data-content="Popup with option trigger" rel="popover" data-placement="bottom" data-original-title="Title">Popup with option trigger</a>
</div>
#stop
accueil_hover.js
$('#popoverData').popover();
$('#popoverOption').popover({ trigger: "hover" })
Where are my js files ?
/public/assets/js
What are my files ?
accueil_hover.js
bootstrap.js
bootstrap.min.js
jquery-2-1-1.js
npm.js
Links are here, but the hovering is not working !
This code is from the example linked here :
http://jsfiddle.net/9P64a/

You should put your javascript in a document ready function. You javascript code won't work because the document isn't fully loaded yet.
change the javascript code to the following:
$(document).ready(function(){
$('#popoverData').popover();
$('#popoverOption').popover({ trigger: "hover" });
});
If this is still not working, please provide the full html output of your site and any console errors.

I had a weird problem though. The title of the question is the exact same thing but I had document ready function. The culprit was something else and it fixed by commenting out
app.js
asset.