React doesn't show images or svg files

user_15200735 0
Viewed 678

My problem is that react doesn't show any image (jpeg, png) or svg file. I've been trying some different techniques such as a simple import inside src attribute of an image, or using require(). But I couldn't solve the problem, I also tried to move the image between the different folders and that also doesn't work. I´m using react and styled-components, here is some of my code:

<Img src={require('../../images/cuervo.png')} alt={alt}></Img>

Creating a new compponent:

import React from 'react'
import { Icon } from '@material-ui/core'

const mainLogo = require("./logo.svg")
const Logo = () => {
    return (
        <Icon>
            <img src={ mainLogo } height={25} width = {25}>
            </img>
        </Icon>
    )
}

export default Logo

Import does not work, either.

reactjs node.js svg javascript
1 Answers

Maybe try replacing the Icon tag with just a figure tag, as shown below, and let me know if that works. It could be that the Icon tag is being annoying.

import React from 'react'
import mainLogo from 'location/of/your/image'

const Logo = () => {
    return (
        <figure>
            <img src={ mainLogo } alt="Logo" />
        </figure>
    )
}

export default Logo

Also, I'm sure you're importing the Logo component correctly into the main component where you want this Logo to be shown, but maybe double-check that to see if it's being imported correctly :)

user_149103030
Related