如何将@nuxt/image与来自资产的图像一起使用
如何将@nuxt/image与来自资产的图像一起使用
提问于 2022-01-29 05:26:08
我尝试使用@nuxt/image来处理来自assets文件夹的图像；当使用静态文件夹或外部url中的图像时，图像也会被优化；但是当将它用于来自资产的图像时，如下所示：
<nuxt-img
src="~assets/img/Icone-accueil/row_left.svg"
alt=""
class="float-left margin-fleche"
quality="30"
/>我在html中得到了这个结果。
<img src="/_ipx/q_30/_nuxt/assets/img/Icone-accueil/row_left.svg" alt="" class="float-left margin-fleche">但是图像没有出现
回答 4
Stack Overflow用户
发布于 2022-10-23 21:24:06
将@nuxt/image与来自assets/文件夹的图像一起使用不起作用。
以下是来自@nuxt/image 文档的
图像应该存储在项目的
static/目录中。 例如，当使用<nuxt-img src="/nuxt-icon.png" />时，它应该放在路径static/nuxt-icon.png下的static/文件夹中。 存储在assets/目录中的图像不使用Nuxt处理，因为这些图像是由webpack管理的。
Stack Overflow用户
发布于 2022-11-10 06:21:50
根据Nuxt图像文档，默认的图像指向是/static，您可以通过更新nuxt.config文件来更改它，如下所示。
例如， 图像：{ dir：“资产/图像”，}，
现在你可以重写为，
<nuxt-img
src="/Icone-accueil/row_left.svg"
alt=""
class="float-left margin-fleche"
quality="30"
/>Stack Overflow用户
发布于 2022-01-29 08:19:34
来自nuxt文档：
在您的
vue模板中，如果您需要链接到您的资产目录，请在资产之前使用带有斜杠的~/assets/your_image.png。
就你而言：
<nuxt-img
src="~/assets/img/Icone-accueil/row_left.svg"
alt=""
class="float-left margin-fleche"
quality="30"
/>另一句引自nuxt的话：
在处理动态映像时，需要使用require
<img :src="require(`~/assets/img/${image}.jpg`)" />在您的情况下，请查看以下内容：
<nuxt-img
:src="require(`~/assets/img/Icone_accueil/row_left.svg`)"
alt=""
class="float-left margin-fleche"
quality="30"
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70902548
复制相关文章
相似问题
腾讯云开发者
