Why image is showing default image, instead of original image?

Question

So I am working on recharts where I am customising dots which can be only done with svg.

<svg className="svg-triangle">
  <g>
    <defs>
        <pattern id="image" x="0%" y="0%" height="100%" width="100%"
                                viewBox="0 0 512 512">
         <image x="0%" y="0%" width="400" height="400" href="../../Assets/Images/Icons/triangle_default.png"></image>
        </pattern>
    </defs>
  <circle cx={cx} cy={cy} r={6} fill="url(#image)" />
 </g>
</svg>

But it keeps showing like this and I don't understand why

what do you mean by default image and original image? You seem to be asking why the pattern is displaying an image called "default" when that's what is in the image name i.e. triangle_default. Why is that a surprise? — Robert Longson, Oct 12 '22 at 12:57
Is there a reason why this is a pattern? Is the idea that the image should be the same size as the blue circle now that the pattern is applied to a (what seams to be a small) circle? Have you tested if the image i actually there if you type the URL in the browser address bar? Can you see the image being loaded in the dev tool in your browser (probably not, so that is a clue)? — chrwahl, Oct 12 '22 at 20:04

score 0 · Accepted Answer · answered Oct 15 '22 at 21:22

If the image is stored locally alongside your code, then you need to import or require the URL to load the file.

const triangle = require('../../Assets/Images/Icons/triangle_default.png');

import triangle from '../../Assets/Images/Icons/triangle_default.png';

<image x="0%" y="0%" width="400" height="400" href={triangle}/>

or inline

<image x="0%" y="0%" width="400" height="400" href={require('../../Assets/Images/Icons/triangle_default.png')}/>

See also: How do I reference a local image in React?

Why image is showing default image, instead of original image?

1 Answers1