I am learning React and am facing an issue, I am not able to reference the images that I have in.
In my code directory I have src folder in which I have components and images directories.
In components I have a component called Header.js where I am trying to access an image from the src/images directory but its not getting displayed.
I have lots of images to display and I am not sure how do I achieve this.
<div className="brand">
<img
className="logo"
src= "shopping-cart/src/images/Veggy.png"
alt="Veggy Brand Logo"
/>
</div>
I have tried removing src or adding ../ but doesn't seems to work.
Can anyone please help me?
Use import to import the image
import veggy from "shopping-cart/src/images/Veggy.png";
And then pass veggy to src
<div className="brand">
<img
className="logo"
src={veggy}
alt="Veggy Brand Logo"
/>
</div>
Or use require directly
src = require("shopping-cart/src/images/Veggy.png")
Related
I am trying to create similar components on my webpage, so instead of hot coding the data i decided to map through an external data(an array i created in an external module in the same project folder). ` {
workflow.map((w) =>{
return(
<div className='process'>
<h2 className="processName">
{w.name}
</h2>
<img src={require(`${w.image}`)} alt="" className="processImage" />
<h4 className="processDescription">
{w.description}
</h4>
</div>
)
})
}`
Everything worked fine until i added images.
i got this error instead
error message
i feel am doing something wrong. please what is the right way to this?
I'm using SvelteKit in my __layout.svelte.
I've got like:
<img src="./logo.svg" alt="logo" />
It works fine with "normal" page like about, contact etc, but it doesn't work with dynamic pages like blog/id.
How can I fix it?
UPDATE FIXED IT!
<img src="/logo.svg" alt="logo" />
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<video src="../public/One-D.mp4" controls muted autoPlay={"autoplay"} poster="./Jacobandbella.jpg" preLoad="auto" loop>video tag is not supported by your browser</video>
</div>
);
}
export default App;
The above code was created with npx create-react-app, I just happened to add a video tag to it.
Although the page loads the video doesn't play or show up.
at first, I thought maybe the video type is causing this, but as you can see the poster attribute was right there.
So my next suspicion was the video tag.
so I placed it inside an HTML file, placed it in the same folder, and ran it with a live server, and managed to get it working.
Now I could ask you guys why isn't this working for react? now
but I actually managed to find a pseudo solution.
<video src="./One-D.mp4" controls muted autoPlay={"autoplay"} poster="./Jacobandbella.jpg" preLoad="auto" loop>video tag is not supported by your browser</video>
I just changed the src attribute.
and it worked.
note- I had the same video in my current directory as well.
but obviously, I don't want to place my resources in the src folder(the current folder).
So my question is: How do I place the video in public/or any other folder which is outside src and make it work?
I don't have enough reputations to comment, so add this as an answer.
Please try this (without . before /One-D.mp4):
<video src="/One-D.mp4" controls muted autoPlay={"autoplay"} poster="./Jacobandbella.jpg" preLoad="auto" loop>video tag is not supported by your browser</video>
I'm new to vue.js and am used to React. I'm currently trying to import an SVG logo into my header component but I'm not sure how. In react, I would simply do import Logo from './path; and use Logo wherever I needed it within the current component. This is basically what I'm attempting to do right now but I keep getting errors. Could anyone tell me how this could be done in Vue.js?
<template>
<header class="nav">
<img src={Logo} alt="24G Logo">
</header>
</template>
<script>
import Logo from '../assets/76_logo.svg';
export default {
name: 'Header'
}
</script>
<style lang="scss" scoped>
</style>
Here are three options. The best in my opinion is the third:
Simply input src like in any webpage <img src='../path/to/file.svg' ... though that come with some drawbacks (regardless if it's :src='logoPath' where logoPath is variable containing the same. For a short overview see this stack answer, and for more details see this article from css tricks.
Check out svg-vue-loader. Vue won't automatically import svg without a loader.
Just paste it in! (Open the svg file and copy paste it into the template.) The best option in my opinion, especially when prototyping or for smaller projects. Like so:
<template>
<header class="nav">
<svg ....
</header>
</template>
If that would make it too crowded later on, just make a new component, call it say Logo, and paste svg in there and then import MainLogo component into your header.
No need for svg-loaders. Though loaders are a dev dependency, so not like it would cost you anyway; they would just do the same thing you can do manually.
// in MainLogo.vue
<template>
<svg ....
</template>
// in MainHeader.vue
<template>
<header class="nav">
<MainLogo>
</header>
</template>
<script>
import MainLogo from '../path/to/file.vue'
export default {
components: { MainLogo }
}
</script>
Cheers
After searching and searching, and seeing all the answers were old, I went ahead and tried the newish v-html prop.
The result, success!
<div v-html="avatar" style="width: 100%"></div>
The avatar is a full element that I stored in the database.
No loaders, no imports, just using the built in resources of Vue.js
If you leave out the style, then the svg will not show.
Also, loading the full element enables me to attach a ref prop to the element. Enabling me to access the svg through script.
Hope that helps someone!!
I used this with avataaar's random avatar generator and stored the resulting svg to the database (mongo)
Here is another approach that I used:
<template>
<a href="#"
class="log-link-css-class">
<!-- SVG Icon Start-->
<img alt="alt message" class="your-logo-css-class"
src="#/assets/images/logofilename.svg">
<!-- <SVG Icon End /> -->
</a>
</template>
No import required. Vue automatically converts it to the unique URL.
edit your code
<script>
import Logo from '../assets/76_logo.svg';
export default {
name: 'Header',
data(){
Logo: Logo
}
}
I am using reactjs with the Laravel (Laravel-mix). I have my image in storage/app/public/images/slider-girl.png and referenced it on
<img src="{require('/images/slider-girl.png')}" />
but not displaying the image.
However, I have tried to put the image in resources and public folder and I get the same response. I have tried options found here but nothing seems to work for me.
<img src={url('storage/app/public/images/slider-girl.png')} />
<img src="{require('/images/slider-girl.png')}" />
I expect the image be displayed.
Go to your webpack.mix.js, add
.setResourceRoot("/");
as illustrated below
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
**.setResourceRoot("/");**
Then just reference it as follows:
<img src="/images/slider-girl.png" />
I hope it helps