<nuxt/>不使用来自API响应的coming :src
<nuxt/>不使用来自API响应的coming :src
提问于 2022-10-20 15:08:20
文档提到我可以像使用<nuxt-img/>的<img>标记一样使用<img>，但事实并非如此。
我制作这个示例是为了说明<img>标记在<nuxt-img/>没有显示图像的情况下工作得很好。
这是代码：
<template>
<main>
<pre>{{ pokemon.sprites.front_shiny }}</pre>
<h1>Normal Image Tag</h1>
<img class="normal-img-tag" :src="`${pokemon.sprites.front_shiny}`" />
<h1>Nuxt Image Tag</h1>
<nuxt-img
class="nuxt-img-tag"
placeholder="/images/lazy.jpg"
:src="`${pokemon.sprites.front_shiny}`"
/>
</main>
</template>
<script>
export default {
data: () => ({
pokemon: {},
}),
async fetch() {
this.pokemon = await this.$axios.$get(
"https://pokeapi.co/api/v2/pokemon/charizard"
);
},
};
</script>nuxt.config.js
export default {
target: 'static',
head: {
title: 'nuxt-img',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
modules: [
'@nuxtjs/axios',
'@nuxt/image',
],
image: {
domains: ['localhost']
},
axios: {
baseURL: '/',
},
}package.json
{
"name": "nuxt-img",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "^5.13.6",
"core-js": "^3.25.3",
"nuxt": "^2.15.8",
"vue": "^2.7.10",
"vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10"
},
"devDependencies": {
"@nuxt/image": "^0.7.1"
}
}这是一个截图
这表明Image是在nuxt-img中指定的延迟加载映像，因此nuxt映像实际上是工作的，但:src却不工作。
我添加了更新：
image: {
domains: ['https://raw.githubusercontent.com'],
}正如@kissu所提到的，但是我在控制台上得到了这个错误：
GET http://localhost:3000/_ipx/_/https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/6.png 500 (IPX Error (500))在终端，这个错误：
ERROR Not supported 11:21:15
at getExport (node_modules\ohmyfetch\cjs\node.cjs:1:54)
at Object.fetch (node_modules\ohmyfetch\cjs\node.cjs:2:47)
at Object.http (node_modules\ipx\dist\shared\ipx.eadce322.cjs:142:38)
at node_modules\ipx\dist\shared\ipx.eadce322.cjs:445:33
at Object.src (node_modules\ipx\dist\shared\ipx.eadce322.cjs:69:25)
at _handleRequest (node_modules\ipx\dist\shared\ipx.eadce322.cjs:521:25)
at handleRequest (node_modules\ipx\dist\shared\ipx.eadce322.cjs:549:10)
at IPXMiddleware (node_modules\ipx\dist\shared\ipx.eadce322.cjs:565:12)
at call (node_modules\connect\index.js:239:7)
at next (node_modules\connect\index.js:183:5)
at next (node_modules\connect\index.js:161:14)
at WebpackBundler.middleware (node_modules\@nuxt\webpack\dist\webpack.js:2194:5)基于GITHUB的项目回购:
https://github.com/abdurrahmanseyidoglu/nuxt-img-test
我是不是做错了什么事，还是实际上不是这样做的？
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-10-20 15:34:05
如果您尝试使用以下方法，这可能会奏效
<template>
<main v-if="!$fetchState.pending">
<pre>{{ pokemon.sprites.front_shiny }}</pre>
<h1>Normal Image Tag</h1>
<h1>Nuxt Image Tag</h1>
<nuxt-img class="nuxt-img-tag" :src="pokemon.sprites.front_shiny" />
</main>
</template>
<script>
export default {
data() {
return {
pokemon: {},
}
},
async fetch() {
this.pokemon = await this.$axios.$get(
'https://pokeapi.co/api/v2/pokemon/charizard'
)
console.log('poke', this.pokemon)
},
}
</script>您需要在nuxt.config.js文件中有一个
export default {
modules: ['@nuxt/image', '@nuxtjs/axios'],
image: {
domains: ['https://raw.githubusercontent.com'],
},
}因为它指的是外部网站。
若要在外部网站上启用图像优化，请指定允许优化哪些域。
以下是文档相关的内容：https://image.nuxtjs.org/api/options#domains
Stack Overflow用户
发布于 2022-10-20 15:39:02
在您的nuxt.config中，您为图像模块指定了域选项。将API域添加到数组中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74142209
复制相关文章
相似问题
腾讯云开发者
