Not understanding why my element.url property can t be read by require function - reactjs

My goal is to display my elements URL property when i map on my array, i tryed to use 'require' according to other post on this website but for some reason it only works when i write directly the strings into my map.
i have the "images" folder into "src" folder. The file i display on bottom is in src/components thats why i used "../" but also tryed "./" just in case , still didnt work
this is my whole array i'd like to display properly:
const [products, setProducts]= useState([
{key:1 ,name:'Structure Deck Assaut d Albaz VF', price:'12,99', url:'../images/DSAlbaz.png'},
{key:2 ,name:'Grands Créateurs Booster Box VF', price:'84,91', url:'../images/grandscreateurs.png'},
{key:3 ,name:'Coffret Arsenal Mystérieux VF', price:'14,99', url:'../images/arsenalmyst.png'},
{key:4 ,name:'La Bataille du Chaos Booster Box VF', price:'84,99', url:'../images/battaillechaos.png'},
{key:5 ,name:'Fantômes du passé saison 2 VF', price:'24,99', url:'../images/fantome2nd.png'},
{key:6 ,name:'Frères de Légende Booster Box VF', price:'89,99', url:'../images/freresdelegende.png'},
{key:7 ,name:'Coffret Or Maximum VF', price:'24,99', url:'../images/OrMaximum.png'},
{key:8 ,name:'Coffret Or Maximum EN', price:'24,99', url:'../images/OrMaximum.png'},
])
this is my array maping that doesnt work as intended:
if(listToDisplay === 0){
displayList = products.map(e =>{
return<div className='product__card' key={e.key}>
<img className='product__picture' src={require(e.url)} alt='SD assaut d albaz'></img>
<h3>{e.name}</h3>
<p>{e.price}$</p>
<div className='buybutton'>Ajouter au panier</div>
</div>
})}
error code : Uncaught Error: Cannot find module '../images/grandscreateurs.png'
seems related to webpack from what i found
so i found another thread and tryed this, with import :
import Logo from '../images/grandscreateurs.png'
then tranform my object value like this :
{key:1 ,name:'Structure Deck Assaut d Albaz VF', price:'12,99', url:Logo},
error message : Uncaught Error: Cannot find module '/static/media/grandscreateurs.7cf37936cedc1da9b626.png'
i am kinda lost now since i don't know how to interact with webpack very well and don't understand how to fix it when i read the thread. thanx you for your understanding and a possible step by step solution.

If you already used the import, so don't use the require in img tag. Try this
import Logo from '../images/grandscreateurs.png'
...
<img className='product__picture' src={Logo} alt='SD assaut d albaz' />

Related

Using Python Selenium - How to enter text on the web <p> tag

I am running into trouble, i am wondering how do i enter a custom text to a paragraph on a webpage.
The paragraph tag already has a default text example below [see Screenshot1]:
<p class="MuiTypography-root jss43 MuiTypography-body1">35 Years</p>
Screenshot1
I want to play with this tag to write my own text here lets say "25 Years".
Please assist!
I tried following:
I've requisite library imported
also check that there is no iframe..
gender = WebDriverWait(driver, 60).until(EC.presence_of_element_located(
(By.CLASS_NAME, 'MuiTypography-root')))
gender.click() # this click and i can see items
gender.send_keys('25 Years') # not working
gender.innerHtml('25 Years') # not working
try this element ((By.XPATH, '//div[#class="jss42"]/p') instead By.CLASS_NAME

leaflet-radar + react : checkbox_div is not defined error

Note: Using React
I'm having trouble setting up a radar in my leaflet map object. I'm able to generate the map easily, but I get an error when I try adding a radar to the map.
The issue comes from this slice of code:
import RadarMap from 'leaflet-radar'
.
.
.
drawMap(){
let radar;
this.map = L.map(this.id);// eslint-disable-line
this.map.setView([this.latitude, this.longitude], this.zoom);
L.tileLayer("https://tile-{s}.openstreetmap.fr/hot/{z}/{x}/{y}.png", { // eslint-disable-line
accessToken: this.accessToken
}
).addTo(this.map);
radar = new L.Control.Radar({}); // eslint-disable-line
radar.addTo(this.map);
}
The error specifically occurs when I call this line:
radar.addTo(this.map);
If I don't call this line, my code will correctly generate a map. But this one line
breaks the map.
To be frank, I've been working on this error for hours now. I've altered this code zealously;
yet iteration after iteration, I still can't get this radar to work. If anyone knows how to help me with this problem, I'd be extremely grateful.
I figured out the problem.
Leaflet-radar was trying to use a global variable named checkbox_div. Since checkbox_div did not exist as a global variable, an error was raised. Adding checkbox_div as a global variable fixed the error.
I solved this error by using globalThis in the constructor of the element and using that to add a global variable.
constructor(props){
super(props);
globalThis.checkbox_div = undefined; // eslint-disable-line
}
In my solution, I gave checkbox_div the value of undefined, but I think it's possible to give checkbox_div any value. Just instantiating checkbox_div is the key.
An alternative solution would be to simply add checkbox_div in the .html file like this
<script>
var checkbox_div;
</script>

What's the right way to create parameters in Soy V2?

Here is my code:
{template .someTemplate}
{#param? icon : string} /** CSS class that loads and styles the icon */
{#param? headlineHtml : any} /** Headline text with optional html for styling */
{#param? textHtml : any} /** Subtext with optional html for styling */
{#param? buttonText : string} /** The call to action text for the button */
{#param? rejectButtonText : string} /** The text for choosing to reject the call to action */
....
When I try to compile I get an error saying:
Exception in thread "main" com.google.template.soy.base.SoySyntaxException: In file ./myfile.soy:7, template com.namespace.someTemplate: Not all code is in Soy V2 syntax (found tag {#param? icon : string} not in Soy V2 syntax).`
The only info I've found online seems to suggest this is correct syntax (per Google's site here, per this cheat sheet I found), though, and Googling for "soy v2" has not given me any results that explain what is correct Soy V2 syntax.
What's the correct way to define these parameters?
It looks like this is the syntax:
{namespace test}
/**
* This is a template.
* #param name The name to say hello to
*/
{template .main}
Hello {$name}
{/template}
I also had trouble finding any documentation. I was getting the same errors saying that the {#param ...} syntax is not valid in V2. Then I found that the examples for soynode (like this one) use the comment syntax. Interestingly, it appears that this new syntax does not include a type definition at all, just a var name.

How to visualize LabelMe database using Matlab

The LabelMe database can be downloaded from http://www.cs.toronto.edu/~norouzi/research/mlh/data/LabelMe_gist.mat
However, there is another link http://labelme.csail.mit.edu/Release3.0/
The webpage has a toolbox but I could not find any database to download. So, I was wondering if I could use the LabelMe_gist.mat which has the following fields. The field names contins the labels for the images, and img perhaps contains the images. How do I display the training and test images? I tried
im = imread(img)
Error using imread>parse_inputs (line 486)
The filename or url argument must be a string.
Error in imread (line 336)
[filename, fmt_s, extraArgs, msg] = parse_inputs(varargin{:});
but surely this is not the way. Please help
load LabelMe_gist.mat;
load('LabelMe_gist.mat', 'img')
Since we had no idea from your post what kind of data this is I went ahead and downloaded it. Turns out, img is a collection of 22019 images that are of size 32x32 (RGB). This is why img is a 32 x 32 x 3 x 22019 variable. Therefore, the i-th image is accessible via imshow(img(:,:,:,i));
Here is an animation of all of them (press Ctrl+C to interrupt):
for iImage = 1:size(img,4)
figure(1);clf;
imshow(img(:,:,:,iImage));
drawnow;
end

How to upload a file using VBA (input file)

I have this CSV file that it need to be uploaded in a WebSite , but this website have an input type file.
I know its pretty impossible because i spent like three weeks loking for an answer,i found another way to upload the file WITHOUT USING THE INPUT TYPE FILE* so i was wondering if anyone found a solution to my probleme
This is what i have :
This is my firt attempt like any average personne using VBA :
Set UploadCSV = IEDoc.getElementById("namecsv")
UploadCSV.Value = "something\toto.csv"
This is my input type file:
<input name="filename" class="text align_center" id="nomfichiercsv" type="file" size="24" accept="text/html,text/plain" value=""/>
Thank's
I tried the SendKeys function no luck
Like mentioned you can do this in an Eclipse project using the Java Selenium driver. Afterwards part of the code could look like this;
driver.findElement(By.id("nomfichiercsv")).sendKeys(UploadCSV);
driver.findElement(By.id("submit")).click();
In VBA, you can use the below code after you have identified the element:
driver.FindElementById("Id of the element").SendKeys ("path to the input file")
If the frame changes when you are trying to upload the file, you will need to switch to the new frame.
If Id is not present for the element, use other Web Element selector methods.

Resources