为什么我的提取请求返回“ ...没有启用JavaScript的无效...
我有一个示例项目，网址为 https://github.com/ Ericg-vue-Questions/fleflet-test/tree/fetch方法 （fetch-method分支）
相关代码在 fluelettest.vue
<template>
<img src="./TheCloud.svg" />
</template>
<script>
export default {
name: "Map",
data() {
this.loadSVGIcon();
return {}
},
methods: {
async loadSVGIcon() {
const response = await fetch( "./TheCloud.svg" );
const svgSrc = await response.text();
console.log( "loadSVGIcon", response );
console.log( "loadSVGIcon", svgSrc );
},
},
};
</script>
<style scoped>
</style>
我所理解，因为我可以使用SVG显示＆lt; img ... /＆gt;标签，我应该能够使用提取请求来获取SVG源。
但是，当我这样做时，我回来的文字是：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>leaflet-test</title>
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but leaflet-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
这很奇怪。
我在做什么错？我需要更改什么，以便获得SVG源？
I have a sample project at https://github.com/ericg-vue-questions/leaflet-test/tree/fetch-method
(fetch-method branch)
The relevant code is in LeafletTest.vue and is
<template>
<img src="./TheCloud.svg" />
</template>
<script>
export default {
name: "Map",
data() {
this.loadSVGIcon();
return {}
},
methods: {
async loadSVGIcon() {
const response = await fetch( "./TheCloud.svg" );
const svgSrc = await response.text();
console.log( "loadSVGIcon", response );
console.log( "loadSVGIcon", svgSrc );
},
},
};
</script>
<style scoped>
</style>
As I understand it, because I can get the svg to display with the <img ... /> tag, I should be able to use a fetch request to obtain the svg source.
However, when I do this, the text I get back is:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>leaflet-test</title>
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but leaflet-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
which is weird.
What am I doing wrong? What do I need to change so I can get the SVG source?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
为了进行
fetch（“ ./thecloud.svg”）进行工作，它应该是静态文件，该文件位于Vue Cli Projects中的/public文件夹中。同样，相对URL路径可能会带来问题，而fetch（“/thecloud.svg”）之类的绝对路径是明确的。否则，可以从
/src中捆绑并导入它：或
导入的非JS文件（例如图像）的实际内容取决于项目配置。
In order for
fetch( "./TheCloud.svg" )to work, it should be static file, which is located in/publicfolder in Vue CLI projects. Also relative URL paths may give problems, while absolute paths likefetch( "/TheCloud.svg" )are unambiguous.Otherwise it can be bundled and imported from
/src:or
The actual content of imported non-JS files like images depends on project configuration.