blocks|key|786745|text|来自nuxt文档：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|786746|在您的vue模板中，如果您需要链接到您的资产目录，请在资产之前使用带有斜杠的~/assets/your_image.png。|blockquote|offset|length|style|CODE|786747|就你而言：|786748|<nuxt-img
++++src="~/assets/img/Icone-accueil/row_left.svg"
++++alt=""
++++class="float-left+margin-fleche"
++++quality="30"
/>|code-block|syntax|javascript|786749|另一句引自nuxt的话：|786750|在处理动态映像时，需要使用require|786751|<img+:src="require(`~/assets/img/${image}.jpg`)"+/>|786752|在您的情况下，请查看以下内容：|786753|<nuxt-img
++++:src="require(`~/assets/img/Icone_accueil/row_left.svg`)"
++++alt=""
++++class="float-left+margin-fleche"
++++quality="30"
/>|786754|entityMap^0|0|3|3|12|N|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|12|8|@$E|13|F|14|G|H]|$E|15|F|16|G|H]]|9|@]|A|$]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|18|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|19|8|@]|9|@]|A|$]]|$1|R|3|S|5|D|7|1A|8|@]|9|@]|A|$]]|$1|T|3|U|5|M|7|1B|8|@]|9|@]|A|$N|O]]|$1|V|3|W|5|6|7|1C|8|@]|9|@]|A|$]]|$1|X|3|Y|5|M|7|1D|8|@]|9|@]|A|$N|O]]|$1|Z|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|10|$]]

From nuxt documentation:
<blockquote>
Inside your ‍‍<code>vue</code> templates, if you need to link to your assets
directory use <code>~/assets/your_image.png</code> with a slash before assets.
</blockquote>
In your case:
<pre class="lang-html prettyprint-override"><code>&lt;nuxt-img
 src=&quot;~/assets/img/Icone-accueil/row_left.svg&quot;
 alt=&quot;&quot;
 class=&quot;float-left margin-fleche&quot;
 quality=&quot;30&quot;
/&gt;
</code></pre>
Another quote from nuxt:
<blockquote>
When working with dynamic images you will need to use require
</blockquote>
<pre class="lang-html prettyprint-override"><code>&lt;img :src=&quot;require(`~/assets/img/${image}.jpg`)&quot; /&gt;

</code></pre>
In your case check this out:
<pre class="lang-html prettyprint-override"><code>&lt;nuxt-img
 :src=&quot;require(`~/assets/img/Icone_accueil/row_left.svg`)&quot;
 alt=&quot;&quot;
 class=&quot;float-left margin-fleche&quot;
 quality=&quot;30&quot;
/&gt;
</code></pre>

blocks|key|384993|text|将@nuxt/image与来自assets/文件夹的图像一起使用不起作用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|384994|以下是来自@nuxt/image+文档的|384995|图像应该存储在项目的static/目录中。
例如，当使用<nuxt-img+src="/nuxt-icon.png"+/>时，它应该放在路径static/nuxt-icon.png下的static/文件夹中。
存储在assets/目录中的图像不使用Nuxt处理，因为这些图像是由webpack管理的。|blockquote|384996|entityMap|0|LINK|mutability|MUTABLE|url|https://image.nuxtjs.org/getting-started/providers#local-images^0|1|B|F|7|0|5|B|H|2|0|0|A|7|S|X|1Y|K|2K|7|30|7|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|H|3|I|5|J|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|K|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

Using <code>@nuxt/image</code> with images from the <code>assets/</code> folder does not work.
The following is from the <code>@nuxt/image</code> <a href="https://image.nuxtjs.org/getting-started/providers#local-images" rel="nofollow noreferrer">documentation</a>:
<blockquote>
Images should be stored in the <code>static/</code> directory of your project.
For example, when using <code>&lt;nuxt-img src=&quot;/nuxt-icon.png&quot; /&gt;</code>, it should
be placed in <code>static/</code> folder under the path <code>static/nuxt-icon.png</code>.
Image stored in the <code>assets/</code> directory are not proccessed with Nuxt
Image because those images are managed by webpack.
</blockquote>

blocks|key|786830|text|根据Nuxt图像文档，默认的图像指向是/static，您可以通过更新nuxt.config文件来更改它，如下所示。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|786831|例如，
图像：{+dir：“资产/图像”，}，|blockquote|786832|现在你可以重写为，|786833|<nuxt-img
++++src="/Icone-accueil/row_left.svg"
++++alt=""
++++class="float-left+margin-fleche"
++++quality="30"
/>|code-block|syntax|javascript|786834|entityMap|0|LINK|mutability|MUTABLE|url|https://image.nuxtjs.org/api/options#dir^0|Y|B|2|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$]]|$1|I|3|J|5|6|7|14|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|15|8|@]|D|@]|E|$N|O]]|$1|P|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

As per <a href="https://image.nuxtjs.org/api/options#dir" rel="nofollow noreferrer">Nuxt Image doc</a>, default direcrtory for images is /static, you can change it by update nuxt.config file as below.
<blockquote>
e.g,
<pre><code>image: {
 dir: 'assets/images',
},
</code></pre>
</blockquote>
Now you can rewrite as,
<pre><code>&lt;nuxt-img
 src=&quot;/Icone-accueil/row_left.svg&quot;
 alt=&quot;&quot;
 class=&quot;float-left margin-fleche&quot;
 quality=&quot;30&quot;
/&gt;
</code></pre>

blocks|key|773222|text|这对我起了作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|773223|<+img+:src=“要求(~/assets/image.jpeg)”alt=“/>|offset|length|style|CODE|773224|entityMap^0|0|F|J|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

This worked for me:
&lt; img :src=&quot;require (<code>~/assets/image.jpeg</code>)&quot;
alt=&quot;&quot;
/&gt;

I try to use @nuxt/image with image from assets folder; when using image from static folder or external url, the image is optimised as well; but when on using it on image from assets like below:
<pre class="lang-html prettyprint-override"><code>&lt;nuxt-img
 src=&quot;~assets/img/Icone-accueil/row_left.svg&quot;
 alt=&quot;&quot;
 class=&quot;float-left margin-fleche&quot;
 quality=&quot;30&quot;
/&gt;
</code></pre>
I have this result in my html
<pre class="lang-html prettyprint-override"><code>&lt;img src=&quot;/_ipx/q_30/_nuxt/assets/img/Icone-accueil/row_left.svg&quot; alt=&quot;&quot; class=&quot;float-left margin-fleche&quot;&gt;
</code></pre>
but the image doesn't appear

How to use @nuxt/image with image from assets

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

我尝试使用@nuxt/image来处理来自assets文件夹的图像；当使用静态文件夹或外部url中的图像时，图像也会被优化；但是当将它用于来自资产的图像时，如下所示：<nuxt-img src="~assets/img/Icone-accueil/row_left.svg" alt="" class=...

问如何将@nuxt/image与来自资产的图像一起使用
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将@nuxt/image与来自资产的图像一起使用EN