sorry for this dummy question but i am having a trouble in my django and react app.
i have an endpoint which serves the image name but the image is saved in my local directory and in my react app i just want to append the file name like this
function Condition(props) {
let src = C:/Users/25191/Desktop/python_projects/doctorsolve/Drsove/media/media/images/HealthCondition/${props.meddata.image}
return (
<>
<div className="item">
<a href="#">
<img src={src} alt="medicine item image" />
<div className="desc">
<p className="medicinename">{props.meddata.title}</p>
</div>
</a>
</div>
</>
);
}
If the question is how to refer to a local file, then use the file URI:
file:///C:/Users/25191/Desktop/python_projects/doctorsolve/Drsove/media/media/images/HealthCondition/${props.meddata.image}
Try:
<img src="" alt="description">
Related
I have this simple react component that gets data from an API (fetch called in UseEffect), and displays it using HTML. When I refresh the page, all html disappears from the page and it goes blank. What's peculiar is that when I instead make some changes in the code editor and let react autoupdate the page after saving, it displays everything just fine.
Here's the code snippet for the component:
export function AgentCard(props){
console.log("agentcard function");
const [agentData,setAgentData] = useState({});
useEffect(()=> {
console.log('running useEffect')
axios.get('https://valorant-api.com/v1/agents/').then(res=>{
var agentRes;
for (const agent of res.data['data']){
if (agent['displayName'] === props.agentName){ agentRes = agent}
}
setAgentData(agentRes);
console.log(agentData)
})
},[])
return(
<div className='AgentCard'>
<h2>{agentData['displayName']}</h2>
<img src={agentData['displayIcon']}></img>
<div className='AgentCardBody'>
<div className='AbilitiesBar'>
<img src={agentData['abilities'][0]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][1]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][2]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][3]['displayIcon']} className='AbilitiesIcon'></img>
</div>
</div>
</div>
)
After some digging and logging, what I found is that when I refresh the page, the state (agentData), is saved to this:
https://imgur.com/a/QzfIdpm
and get the following error in the console:
https://imgur.com/a/H7gLiTQ
But once I make any change to the editor and let react autorefresh, the logs show that the state agentData has the right data object pulled from the API.
Also, this only happens when I have the following part of the code running
<img src={agentData['abilities'][0]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][1]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][2]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][3]['displayIcon']} className='AbilitiesIcon'></img>
Once I comment this out, everything displays correctly even after a browser refresh
I know the way I've posed the question is confusing, but I'm new to front end development and don't really know what I'm supposed to look for here.
Probably because agentData.abilities returns undefined (remember that you have an empty object that is asynchronously populated), but you're trying to access it in your template as if an array is present.
You can solve this easily if you conditionally render those <img> elements when agentData.abilities is not undefined, i.e.:
return(
<div className='AgentCard'>
<h2>{agentData['displayName']}</h2>
<img src={agentData['displayIcon']}></img>
<div className='AgentCardBody'>
{agentData.abilities && (
<div className='AbilitiesBar'>
<img src={agentData.abilities[0].displayIcon} className='AbilitiesIcon' />
<img src={agentData.abilities[1].displayIcon} className='AbilitiesIcon' />
<img src={agentData.abilities[2].displayIcon} className='AbilitiesIcon' />
<img src={agentData.abilities[3].displayIcon} className='AbilitiesIcon' />
</div>
)}
</div>
</div>
)
Even better: you can simply iterate through the first 4 entries in agentData.abilities to keep your DOM a bit simpler:
return(
<div className='AgentCard'>
<h2>{agentData['displayName']}</h2>
<img src={agentData['displayIcon']}></img>
<div className='AgentCardBody'>
<div className='AbilitiesBar'>
{agentData.abilities && agentData.abilities.slice(0,4).forEach(ability => (
<img src={ability.displayIcon} className='AbilitiesIcon' />
)}
</div>
</div>
</div>
)
I'm making a website and for some reason the images are not showing up on the browser. The ALT TEXT is appearing correctly but the images are not. Images have been placed in public/images...
The code is as:
<section03>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="public\images\untitled.png" alt="an image">
SOME TEXT
</div>
</div>
</div>
</section03>
try to use forward slash for image path instead of back slash
<section03>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="public/images/untitled.png" alt="an image">
SOME TEXT
</div>
</div>
</div>
</section03>
More examples: >>>
developer.mozilla.org/en-US/docs/Web/HTML/Element/img
w3schools.com/html/html_filepaths.asp
You need to set static folder path first for the express app in order to access static files using ejs or html. Here we will consider public folder as a static folder for our app.
Just copy the below line to the entrypoint of your app & then replace "./public" with your public folder path.
app.use(express.static("./public"));
Complete Example Code
const express = require("express");
const app = express();
app.use(express.static("./public"));
app.get("/", (req,res) => {
return res.send("welcome")
})
/* Start Server */
app.listen(5000, () => {
logger.info(`Success, service running on port 5000.`);
})
Also,
<img src="public\images\untitled.png" alt="an image"> will be replaced with <img src="/images/untitled.png" alt="an image">
I want to show all images that are in nuxtjs, i used the strorage (Laravel ) to save the files
<img v-for="(row, index) in files" :src="'storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
The link is as follows
http://localhost:3000/storage/example.jpg
but nothing show
I tested this before, Don't you think the problem could be from the controller?
public function index()
{
$files = scandir(storage_path('app/public/'));
$allFile = array_diff($files, ['.', '..', '.gitignore']);
return response()->json($allFile, 200);
}
The problem here is with the image path you need to specify where your image file exactly is, so you did most of its part like :src="'storage/' + row" but since your actual path to your image is something like http://localhost:8000/storage/example.jpg (the base URL of the Laravel app).
If both Laravel and Nuxt.js app serve under the same port and host
You need a leading slash in your src attribute to make an exact path.
<img v-for="(row, index) in files" :src="'/storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
If they are not serving on the same host and port
You have to declare an individual variable for your base URL, preferably in .env file and then refer to it and prepend it to your image src attribute.
So let's say we gonna define it in .env file, then it should be something like this:
//.env
BASE_URL=http://localhost:8000/
Then we will refer to it in our javascript data method (if that was not exists we will use default value as 'http://localhost:8000/').
data: function() {
return {
baseURL: process.env.BASE_URL || 'http://localhost:8000/ OR http://site.test/'
}
}
And in the last step we will prepend it to our image src attribute just like this:
<img v-for="(row, index) in files" :src="baseURL + 'storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
i can't display the image in my website, which is fetched from the API.
this is my image fetching/showing code.
this.state.filteredData.map((data,i) =>
<div>
<span>{data.details.name}</span>
<br/ >
<img source={{uri:data.details.image}} style={aStyle} />
<br/>
<span>{data.details[ 'section of law' ]}</span>
<br />3
<span>{data.details[ 'type of person' ]}</span>
</div>
const aStyle={
width:300,
height:360
};
only image box is showing.
<img src={{uri:data.details.image}} style={aStyle} />
image has src attribute and you can pass image url string or base64 image data to it.
<img src={data.details.image} style={aStyle} />
I have the following line of code:
<IMG SRC= "Home.png">
I copied this directly from a different part of my code that worked. However, now the home image won't show up on my site. It says it prints it, but it's not visible. What's going on?
edit:
if(isset($_SESSION['userInfo']['username'])){
echo '<div class = "header"><IMG SRC= "Home.png" ALT="image">
<IMG SRC= "ViewProfile.png" ALT="image"> <IMG SRC= "ViewCart.png" ALT="image">';
echo '</div>';
else{
echo '<div class = "header">
<IMG SRC= "Home.png">
<IMG SRC= "FAQ.png"></div>';
}
You are missing the closing parenthesis } for the if statement. That might be the problem.
Try this...
if(isset($_SESSION['userInfo']['username'])){
echo '<div class = "header"><IMG SRC= "Home.png" ALT="image">
<IMG SRC= "ViewProfile.png" ALT="image"> <IMG SRC= "ViewCart.png" ALT="image">';
echo '</div>';
} else {
echo '<div class = "header">
<IMG SRC= "Home.png">
<IMG SRC= "FAQ.png"></div>';
}
Try
<div class="header">
<img src="Home.png"/>
<img src="FAQ.png"/>
</div>
Is it a broken image icon on the browser?
One thing might be that Home.png is in another directory. Did you copy this code from the same file or another file (possibly located in another directory)? If you copied this code from a file located in another directory you will need to format the image source link accordingly.
For example say you have a directory structure like so:
-index.htm (File)
-Home.png (File)
-js (Directory)
-css (Directory)
-pages (Directory)
---example.htm (File inside Pages directory)
If you then copied the code from your index.htm file to the example.htm located in your pages directory you would need to modify the link in the example.htm page like so:
<img src="../Home.png" />
Note the ".." which tells the browser to look in one directory up from where your html page is located.
be sure that the image and file in the same folder
and be sure that the name of image Home with H as capital letter