fes.js/assets/guide_image.md.2e74f65f.js

import{_ as s,o as a,c as l,V as n}from"./chunks/framework.b31a4d00.js";const u=JSON.parse('{"title":"使用图片","description":"","frontmatter":{},"headers":[],"relativePath":"guide/image.md"}'),o={name:"guide/image.md"},p=n(`<h1 id="使用图片" tabindex="-1">使用图片 <a class="header-anchor" href="#使用图片" aria-label="Permalink to &quot;使用图片&quot;">​</a></h1><h2 id="使用图片-1" tabindex="-1">使用图片 <a class="header-anchor" href="#使用图片-1" aria-label="Permalink to &quot;使用图片&quot;">​</a></h2><p>假设在 <code>src/images</code> 目录下有 <code>logo.png</code>。</p><h3 id="vue-里使用图片" tabindex="-1">Vue 里使用图片 <a class="header-anchor" href="#vue-里使用图片" aria-label="Permalink to &quot;Vue 里使用图片&quot;">​</a></h3><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@/images/logo.png\`</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="js-里使用图片" tabindex="-1">JS 里使用图片 <a class="header-anchor" href="#js-里使用图片" aria-label="Permalink to &quot;JS 里使用图片&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> imageUrl </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/images/logo.png\`</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="css-里使用图片" tabindex="-1">CSS 里使用图片 <a class="header-anchor" href="#css-里使用图片" aria-label="Permalink to &quot;CSS 里使用图片&quot;">​</a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">logo</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">url</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/images/logo.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>注意：</p><ol><li>这是 <code>webpack</code> 的规则，如果切到其他打包工具，可能会有变化</li><li><code>less</code> 中同样适用</li></ol><h2 id="public-文件夹" tabindex="-1"><code>public</code> 文件夹 <a class="header-anchor" href="#public-文件夹" aria-label="Permalink to &quot;\`public\` 文件夹&quot;">​</a></h2><p>有些内容不需要经过 <code>webpack</code> 模块化处理，则可以将这些内容放在 <code>public</code> 文件夹，构建后会直接复制到 <code>dist</code> 目录，所以你需要通过<code>BASE_URL</code>来引入它们。</p><h3 id="在-html-模板中使用" tabindex="-1">在 HTML 模板中使用 <a class="header-anchor" href="#在-html-模板中使用" aria-label="Permalink to &quot;在 HTML 模板中使用&quot;">​</a></h3><p>在 <code>index.html</code> 中需要设置：</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">icon</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">&lt;%= BASE_URL %&gt;favicon.ico</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span></code></pre></div><h3 id="在-vue-文件中使用" tabindex="-1">在.vue 文件中使用 <a class="header-anchor" href="#在-vue-文件中使用" aria-label="Permalink to &quot;在.vue 文件中使用&quot;">​</a></h3><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">\`\${publicPath}my-image.png\`</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">process</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">env</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">BASE_URL</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div>`,18),e=[p];function t(c,r,D,i,F,y){return a(),l("div",null,e)}const h=s(o,[["render",t]]);export{u as __pageData,h as default};