I tried to upload an image from my asset but nothing appears. I would like the image source to match the value set in character.headImage.
data/character.js
export const character = [
{
name : 'Super Lady',
fullImage : '../assets/characters/superLadyFull.png',
headImage : '../assets/characters/superLadyHead.png',
description : '少し恥ずかしがり屋の女の子 好きなことは買い物、カフェ巡り'
}
]
charactersSelection.vue
<template>
<div>
select the characther
<div v-for="character in characters">
<img :src="character.headImage">
<p>{{character.description}}</p>
</div>
</div>
</template>
<script>
import {character} from "../data/Character";
export default {
name: "CharactersSelection",
data() {
return {
characters : character
}
}
}
</script>
<style scoped>
</style>
Ultimately you want your image to look like this
<img src="assets/characters/superLadyHead.png">
Change your character image source strings to reflect the following
export const character = [
{
name : 'Super Lady',
fullImage : 'assets/characters/superLadyFull.png',
headImage : 'assets/characters/superLadyHead.png',
description : '少し恥ずかしがり屋の女の子 好きなことは買い物、カフェ巡り'
}
]
However, this makes some assumptions about how your page is being served.
Related
I'm running into an issue where I've created a non page component with a StaticQuery that is pulling information with a set up like this.
const BestSellers = () => (
<div>
<StaticQuery
query={bestSellerQuery}
render={data => (
<div>
{data.allMarkdownRemark.edges.map(({ node }) => (
<Card className="m-2 index-card" key={node.id}>
<Link to={node.fields.slug}>
<GatsbyImage
className="card-img-top"
image={node.frontmatter.image}
alt={node.frontmatter.description}
/>
</Link>
<hr />
<CardBody>
<Link to={node.fields.slug}>
<CardTitle className="h4 text-light text-wrap">
{node.frontmatter.title}
</CardTitle>
</Link>
<CardSubtitle>{node.frontmatter.description}</CardSubtitle>
{/* <CardSubtitle>{node.excerpt}</CardSubtitle> */}
<CardSubtitle className="float-left mt-5">
Price: ${node.frontmatter.price}
</CardSubtitle>
<CardSubtitle>
<Badge color="danger float-right mt-5">
{node.frontmatter.tag}
</Badge>
</CardSubtitle>
</CardBody>
</Card>
))}
</div>
)}
/>
</div>
);
const bestSellerQuery = graphql`
query bestSellerQuery {
allMarkdownRemark(
filter: { frontmatter: { tag: { eq: "popular" }}}
sort: { fields: [frontmatter___date], order: DESC }
limit: 2
) {
edges {
node {
id
frontmatter {
title
description
price
tag
image {
childImageSharp {
gatsbyImageData(
layout: CONSTRAINED
height: 600
placeholder: BLURRED
formats: [AUTO, JPG]
transformOptions: { fit: COVER, cropFocus: ATTENTION }
)
}
}
}
fields {
slug
}
excerpt
}
}
}
}
`
export default BestSellers;
What I'm doing is my pages are being created programmatically from a Markdown file once it is clicked on so I'm trying to import this into the template that i use to create pages and it just shows loading(static query) I've tried using this same query in pages that do and don't have a page query on them and it results in the same as using this in the template component that I'm trying to use it in.
It was the issues in the graphql query which was being used more specifically the line
filter: { frontmatter: { tag: { eq: "popular" }}}
the issue was the "popular" in the MD file is in caps so by changing it to "POPULAR" that solved it....
I'm trying to build an image preview system for an avatar:
<template>
<div>
<div class="level">
<img :src="avatar" width="50" height="50" class="mr-1">
</div>
<form method="POST" enctype="multipart/form-data">
<input type="file" accept="image/*" #change="onChange">
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
avatar: null,
setAuthHeader: axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.$store.state.token,
};
},
computed: {
user() {
return this.$store.state.user
},
avatar_path() {
this.avatar = this.user.avatar_path
},
},
methods: {
onChange(e) {
if (! e.target.files.length) return;
let file = e.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = e => {
this.avatar = e.target.result;
this.persist(file);
};
},
persist(avatar) {
let data = new FormData();
data.append('avatar', avatar);
this.setAuthHeader;
axios.post(`/settings/avatar`, data)
.then(() => flash('Avatar uploaded!'));
}
}
}
</script>
In my code the user computed property returns a JSON object from vuex which gets the object from local stroage.
What keeps happening is when I refresh the page that changes the profile image the default image doesn't show up. The element looks like this in chrome devtools:
<img width="50" height="50" class="mr-1">
When I open up vue dev tools, click on the component this functionality is in, the image src gets added:
<img width="50" height="50" class="mr-1" src="http://127.0.0.1:8000/storage/avatars/default.png">
You're using the avatar_path computed property incorrectly:
You shouldn't be modifying state in a computed property (you're assigning to this.avatar).
Nothing is accessing avatar_path for it to be called. It's when you open Vue dev tools that the dev tools code accesses that property so it can display it in the component data UI.
The best fix is to change avatar into a computed property like this:
computed: {
avatar() {
if (this.user) {
return this.user.avatar_path;
} else {
// Use a placeholder image URL
return '/path/to/placeholder.png';
}
}
}
<template>
<div>
<div class="level">
<img :src="avatar" width="50" height="50" class="mr-1">
</div>
<form method="POST" enctype="multipart/form-data">
<input type="file" accept="image/*" #change="onChange">
</form>
</div>
<script>
import axios from 'axios'
export default {
data() {
return {
setAuthHeader: axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.$store.state.token,
};
},
computed: {
user() {
return this.$store.state.user
},
avatar() {
return this.user.avatar_path;
},
},
methods: {
}
}
I'm building my website with GatsbyJS and graphsql. On my projects site I want to display a grid with Images that Link to further sites.
In order to do that I need to query multiple images. I created a folder in my images folder called "portfolio" and I want to query all the pictures in there.
I have used useStaticQuery before but I've read that currently it's only possible to query one instance so I tried doing it like this, but the code is not working. Any help? Thanks a lot!
import React from 'react'
import Img from 'gatsby-image'
import { graphql } from 'gatsby'
const Portfolio = ({data}) => (
<>
{data.allFile.edges.map(image => {
return (
<div className="sec">
<div className="portfolio">
<div className="containerp">
<Img className="centeredp" fluid={image.node.childImageSharp.fluid}/>
</div>
</div>
</div>
) })}
</>
)
export default Portfolio
export const portfolioQuery = graphql`
{
allFile(filter: {relativeDirectory: {eq: "portfolio"}}) {
edges {
node {
id
childImageSharp {
fluid(maxWidth: 500) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`;
Is it possible that you have some images missing, so none are rendering?
You could try checking that the image is present before rendering the Img, like this:
{image.node.childImageSharp &&
<Img className="centeredp" fluid={image.node.childImageSharp.fluid}/>}
NB:
If you like, you could also make it a bit clearer by assigning your mapping object (edges) to a variable. It doesn't make that much difference in this example but can be clearer if you have more going on in your component.
E.g.
const Portfolio = ({data}) => (
<>
const images = data.allFile.edges
{images.map(image => {
return (
<div className="sec">
<div className="portfolio">
<div className="containerp">
<Img className="centeredp" fluid={image.node.childImageSharp.fluid}/>
</div>
</div>
</div>
) })}
</>
)
It's most likely that you probably need to set up your 'gatsby-source-filesystem' to recognize images within a query.
in your gatsby-config.js:
{
resolve: gatsby-source-filesystem,
options: {
name: images,
path: ./src/images/,
},
},
Hej,
As I'm beginner in React. I have a problem of displaying my image passed from state to component.
App.js
this.state = {
projects: [
title: 'xxx',
image: require(../src/img/landscape.jpg)
]
}
<Works projects={this.state.projects}/>
Work.jsx
{this.props.project.title}
{this.props.project.image}
Title is displaying without any problems but image doesnt appear. Do I need to bind it in another way???
First of all, the state must be written like this:
state = {
projects: [
{ title: 'xxx',
image: require("../src/img/landscape.jpg")
}
]
}
now the work.js will contain the following code:
<div>
{this.state.projects.map((item, index) => {
return (
<div key={index}>
<p>{item.title}</p>
<img src={item.image} />
</div>
)})
}
</div>
Is your state like that you gave in your question or is it like that?
state = {
projects: [
{
title: "xxx",
image: require( "../src/img/landscape.jpg" ),
},
],
}
With your code at least you should see the path of the image. But, if you want to see the image you need to use <img>.
<div>
{
props.projects.map( project => (
<div>
<p>{project.title}</p>
<img src={project.image} />
</div>
) )
}
</div>
Hello guys im new to REACT im trying to pass my image props to {logo} has anybody a clue how i can set it up ?
123 is displayed but i still miss the image
export default class StickyHeader extends React.Component {
static propTypes = {
}
static defaultProps = {
}
render() {
const { logo } = this.props;
return (
<header>
<div className={'logo'}>
{logo}
</div>
<div>123</div>
</header>
);
}
}
<StickyHeader logo={ <img src="http://via.placeholder.com/350x150" alt="" /> }></StickyHeader>
In this case, I would put the image tag inside your sticky header component, and then pass just the logo url as a property, so your render method would look more like this:
render() {
const { logoUrl } = this.props;
return (
<header>
<div className={'logo'}>
<img src={logoUrl} />
</div>
<div>123</div>
</header>
);
}
}
and then your usage -
<StickyHeader logoUrl={'http://via.placeholder.com/350x150'} />