javascript - How vue introduces svg files in HTML

Question

On the Internet, you can use the object element, but it reports 404, so the path is definitely correct.

Code:

Answer 1

Check this:
https://stackoverflow.com/que...

Answer 2

Since the resource is svg, it is best to use the svg tag to reference it, so that you can resize the svg, set the fill color, and a series of svg features.

How to quote depends on which loader is used:

html:

    <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="require('../svg/icon-header.svg')"></use>

webpack:

    {
        test: /\.svg$/,
        loader: 'svg-sprite?' + JSON.stringify({
            name: '[name]_[hash]',
            prefixize: true
        })
    }

Loader address: https://github.com/kisenka/svg-sprite-loader
You can view the API in detail.

Answer 3

If used as a picture, it can be used directly as a background
background-image: url('../../../static/icons/site.svg');