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
Related
I have the following element on a page (it's a button with the word Next that you click)
<div class="aaabutton">
<div class="aaacontainer">
<div class="aaatext">
Next
</div>
</div>
</div>
No matter what I try it can't find it.
Tried following:
css=.show .aaacontainer
xpath=//div[#id='Next']/div[3]/div[2]/div/div
xpath=//div[3]/div[9]/div[3]/div[2]/div/div
Times out trying to find it (for example Trying to find xpath=//div[#id='Next']/div[3]/div[2]/div/div... Failed:)
Since you didn't share all your existing code trials and a link to that page we can only guess. So, I guess this may work:
xpath="//div[#id='Next']//div[#class='aaabutton'][contains(.,'Next')]"
I am new to React with only about 4 months of experience, and I am facing a problem when referencing a group of images in the same directory as the code below, in order to render them on the webpage. I am getting a module not found error whenever I pass their paths from the JSON file (as an object, but still a string nevertheless) and everything works fine when I pass a single path through my function
this is the code for rendering the images one by one.
<div className="cards col">
{Pagedproducts.map((item) => (
<div id="card" key={item.id}>
<div className="image">
<img
className="prev"
src={require(item.preview)}
alt={"Image not rendering"}
/>//item.preview returns a path for the image from this file's perspective
</div>
</div>
))}
</div>
using this same code but passing the path right away and rendering the same pic on all items WORKS! but i logged the item.preview variable and it literally shows the exact same path passed to the require function.
<img src={require('./productPic/IMG-1.jpg')} /> //doing this works fine but it's not what i'm trying to do
I am aware of the other methods that try to solve this but none of them use an object that holds a path to the image.
when i run my code i get a Module not found error
Uncaught Error: Cannot find module './productPic/IMG-1.jpg'
I also tried making it a string and passing the variable in it as such
<img src={require(`${item.preview}`)} />
yet also this does not work.
After React code is compiled, it will look into the /public directory for any images.
put your photos into the public folder and it'll work.
Here is the working example. codesandbox.io
I am learning react, hence I am new to react though not new to development. I was creating a slider in which the <div> have a background that is to be set using already present images. I think there is mistake somewhere in dynamically allocating the directory of the images although i am not entirely sure.
This is short image of directory
image of directory
I have details of images stored in a const slides in which cover holds the name of image( like cover1.jpg). When I console.log(item.cover) I got the correct names of images, but I can't seem to implement it to correctly represent the directory of images
This is the current code that is written in featured.js
slides.map((item)=>{
return(
<div key={item.id} className="item-slider"
style={{background:'url("../images/covers/'+item.cover+'")'}} >
</div>
)
})
And previously i have tried
style={{background:'url(/images/covers/${item.cover})'}}
and
style={{background:'url("images/covers/${item.cover}")'}}
with many different combos of directory
How can i get the images to show and what am i doing wrong. Any help is well appreciated.
You're not using template literals correctly. You're using ' instead of `.
style={{background:`url(/images/covers/${item.cover})`}}
I don't Know Why! but it worked when i added another nest
slides.map((item)=>{
return(
<div key={item.id}>
<div className="item-slider"
style={{background:'url("../images/covers/'+item.cover+'")'}} >
</div>
</div>
)
})
I've been learning ReactJS for the past couple of days and have been trying to build a website using semantic-ui-react in ReactJS. I understand there are components that one can use now but I am stuck on what to do in a scenario such as the creation of a footer... typically, in my raw HTML, I would have the semantic.min.css file included and at the bottom:
<div class="ui inverted pink vertical footer segment">
<div class="ui center aligned container">
<h4 class="ui inverted header">© Copyright 2017 | All rights reserved | Blahhh</h4>
<i class="facebook square icon big"></i>
<i class="twitter square icon big"></i>
<i class="linkedin square icon big"></i>
</div>
</div>
Now I want to translate this into semantic-ui-react. Footer is a class not a component in react by default so there's no component for it... Which I assume means I have to make my own component and basically write the code above. My problem now is that I don't know how to make it render as if I was using regular old semantic.min.css. I read somewhere to download the css file and include it, but one, I don't know where to (MyCustomFooterComponent or index.html), and in doing that, am I not increasing by load times on my website. Would this mean that everywhere there's a footer, just for one small section of custom code, the entire CSS file is going to be loaded?
Also, after building, would there be a double-import scenario from my addition of the Semantic CSS and semantic-ui-react's CSS?
Sorry for the long question but I'm new to this and I like to find out what I can before making a terrible mistake.
If you are using react-semantic-ui then you already include 'the old semantic-ui.min.css' already. See here.
Hence, create a component and put those code in render(), change 'class' to 'className' and then use it.
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