I'm trying to create a webshop, and having some trouble with loading in different images to different categories. Running the server locally and hard coded some category objects (for now, later it'll be coming from a database) and having all the images in the same folder I set the file name as img attribute, so my "creating my database" looks like something like this:
created() {
this.categories = [
{
id: 1,
text: 'breed category 1',
cvalue: 'cat1',
img: 'king-charles-spaniel-resting-head.webp'
},
{
id: 2,
text: 'breed category 2',
cvalue: 'cat2',
img: 'border-collie-dog.webp'
},
{
id: 3,
text: 'breed category 3',
cvalue: 'cat3',
img: 's960_Webp.net-resizeimage__2_.jpg'
},...
Then I passed the objects to the child component and tried to v-bind the img attribute into the src tag:
<img v-bind:src="'../assets/categ/'+category.img" />
When inspecting the source code, I can see that the binding was successful because the full root appears there (src="../assets/categ/king-charles-spaniel-resting-head.webp"). But the app is not recognizing the root at all and returns with 404 file not found.
(When setting the src attribute manually, in inspect mode the following root appears and can load the image: src="/img/border-collie-dog.4ca9975d.webp")
I've also attached an image: the first one is the v-binded root, the second one is when I set the src manually. Image
I hope my explanation was clear enough (I'm quite newbie to development), thank you for the help in advance!
you can use like this. # reference to src folder:
<img :src="`#/assets/categ/${category.img}`">
Related
Hello I tried to load my template as hmtlfile instead of html. But when i tried to load the template it give me error "templatesDialog.setState is not a function"
Could you provide me sample function how to use the hmtlfile function?
// Register a templates definition set named "default".
CKEDITOR.addTemplates( 'default', {
// The name of sub folder which hold the shortcut preview images of the
// templates.
imagesPath: CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),
// The templates definitions.
templates: [ {
title: 'Image and Title',
image: 'template1.gif',
description: 'One main image with a title and text that surround the image.',
htmlFile: 'article.html' //this file is loaded in templates folder
} ]
} );
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_plugins_templates_templateDefinition.html#property-htmlFile
I tried to path the htmlFile but still not working.
I am facing problems trying to embed a hyperlink in an image. The code from the documentation (https://github.com/dolanmiu/docx/blob/master/demo/35-hyperlinks.ts) beginning at line 84 is not working for me:
new Paragraph({
children: [
new ExternalHyperlink({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
}),
],
link: "http://www.google.com",
}),
],
})
When I copy this very snippet into my code, the image is rendered as expected but there is no link being integrated. It seems like the ExternalHyperLink element is not working specifically with images, as it works flawlessly when trying to add the link to a TextRun element. I tested also if it was a problem related to the code being positioned within the header section but the behaviour is the same when shifting the code to the body of the document.
I am using the latest version of docx. Can anyone give me an advice what is going wrong here?
I know this problem sounds a bit complex but it's not.
I'll try my best to explain it in a simple way:
I'm making a list of blog posts for the homepage of my Gatsby website.
The list is made of "boxes", every box that links to a post has a background-image.
I pass this background-image to a styled-component, it gets the image from a prop value that I inserted in the main < div > element (you'll find the example bellow).
It works fine, till I try use an image from my local folder under src (instead of using an online link that I simply putted on frontmatter).
Here's what I did in the past, and worked:
I put the url of the image on the frontmatter of the markdown file:
---
slug: "/post/my-post"
[...]
imghero: "https:/path/to/image-online.jpg"
---
Then query it with graphql:
const LISTING_QUERY = graphql`
query BlogPostListing {
allMarkdownRemark(limit: 10, sort: {
order: DESC,
fields: [frontmatter___date]
}) {
edges {
node {
excerpt
frontmatter {
title
slug
date(formatString: "MMMM DD, YYYY")
imghero
}
}
}
}
}
`
After that I insert the {node.frontmatter.imghero} it on a prop on the main div:
const Listing = () => (
<StaticQuery
query={LISTING_QUERY}
render={({allMarkdownRemark}) => (
allMarkdownRemark.edges.map(({node}) => (
<Article img_background={node.frontmatter.imghero} key={node.frontmatter.slug}>
[... etc ...]
</Article>
))
)}
/>
)
export default Listing
And finally I call that img_background prop in the styled-component:
const Article = styled.article`
background-image: url(${props => props.img_background};);
[... etc ...]
`
This method works.
Now I want to get the image from my "images" folder and not from a random url.
I installed gatsby-remark-images
Set it on gatsby-config.js and put the path of some image on frontmatter.
Test everything with http://localhost:8000/___graphql (and worked)
Insert the additional query throught graphql:
[...]
frontmatter {
date(formatString: "DD MMMM, YYYY")
title
imghero
hero {
childImageSharp{
fluid(maxWidth: 630) {
...GatsbyImageSharpFluid
}
}
}
[...]
I modify the node on the component with the new path:
<Article img_background={node.frontmatter.hero.childImageSharp.fluid} [...]>
[...]
</Article>
Gatsby Develop compiles fine.
But then my homepage is completely white.
And the console of the browser says that node.frontmatter.hero is "null".
I don't know that else to do.
Thanks for the help.
I think a bit more info is necessary to resolve your issue, none of the thing you listed out looks wrong in itself. However so many folks got tripped off by image handling in gatsby that I'm writing a check list. It's meant to be generic, but I think no.5, 8, 9, 12 might help you locate the problem.
Using image with gatsby-transformer-remark + gatsby-transformer-sharp troubleshooting
Setup
Is there any error at all? Sometimes gatsby will still compile successfully despite something's wrong. Check the console for anything that's... red.
Did you restart gatsby i.e turn it on and off again? Try removing cache & public folder (.cache and public) if you suspect something's wrong with them.
Did you list your image folder, or any of its parent folders in gatsby-source-filesystem?
In your frontmatter, is the path to the image relative to the markdown file itself? i.e path starts with a dot ./relative/path/to/image.png
Does all markdown has a hero field in frontmatter? If a file doesn't have a hero field, it will be null.
If the image path in frontmatter is not relative or doesn't link to a file, it'll be treated as a regular string.
Query & Fragments
Does your query work? Test your query in http://localhost:8000/___graphql. Make sure the image field show up as a File node. Try something simple like
query {
allMarkdownRemark {
frontmatter {
title
hero {
id
name <-- just enough to know the file exists
}
}
}
}
If your hero shows up as a string, something's wrong, check the setup again.
Are you using fragments? Currently fragments can't be test in the graphiql tool, so you might need to find the definition of that fragment and test it manually. Here's a list of the default ones that come with gatsby-transformer-sharp and their definitions.
If you're using a custom fragment, make sure to define & export it somewhere.
Usage
If image doesn't show up in the browser, inspect & try to find what's shown up in place of your image.
Are you using gatsby-image? If so, make sure you're passing in something it can work with.
Make sure your image component receives what it should. If your component's expecting a path, don't pass in an object, like result of a fragment.
Some side note
gatsby-remark-images only handle relative links in markdown image & html <img>, so if your image is living in frontmatter, it won't do anything.
im new about using jqgrid, and i have a question about jqgrid, hoping help to resolve my question :)
I have a grid that contain a column 'Download File', the column filed with data i load from database and the value is local url that direct to the document like 'file:///D:/Download Folder/File.xlsx'.
I have 2 .js, one is gridview .js and other is model.js. I create link inside model.js using the data and call it inside gridview.js in colModel.
This is my code
//Model.js
val.fileDirText = ''+fileName'';
//Gridview.js
{name: 'fileDirText',width:250,sortable:false}
The Download File column is has a underline and hand symbol if i hover to it but there is no action when i click, open in new tab, and open in new window, but it can copy link.
So how to make the link is clickable and start download the file?
Thank you :)
/*Use my code as reference, it may help.*/
colNames : ["Certificate"],
colModel: [
{ name: "Certificate", index: "Certificate", align: "center", formatter: downloadLink },
],
function downloadLink(cellvalue, options, rowObject) {
var MTJobRoleId = rowObject.MTJobRoleId;
return "<a href='../Templates/Certificate129821/GENERAL_ENGLISH_1_100720181922.pdf' download=''>View Certificate</a>";
}
Ext JS 4. I have a tree.Panel where I want to display custom HTML in each node, generated from that node’s model data. I can do this by setting the node’s text when loading the store, but it is not the model’s job to do markup. So I created a custom Column that renders my HTML.
My problem is: unless I derive from Ext.tree.Column, it doesn’t show up properly (no outline, plus/minus icons etc.). If I do, everything is fine, but Ext.tree.Column is marked as private to Ext JS.
Is there some officially supported API to do what I want?
I have written a blog post about how to customize ExtJS 4 tree panel, I hope it will help:
http://hardtouse.com/blog/?p=24
The idea is to use renderer combined with A LOT OF css magic:
columns : [{
xtype : 'treecolumn',
dataIndex : 'name',
renderer : function(value, record){
return Ext.String.format('<div class="tree-font">{0}</div>', value);
}]
Thanks for your answer above. Here is another example showing a few more options for formatting:
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1,
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
// see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Column-cfg-renderer
var tooltipString = "Hello";
metaData.tdAttr = 'data-qtip="' + tooltipString + '"';
return Ext.String.format('{0} <span style="color:red;">{1}</span>', value, record.data.personname);
}
}]
You might also want to add
hideHeaders : true,
to your tree panel config to remove the "grid" header that appears as a result of using a treecolumn.
Murray