Vue 网页中的 src 可以是变量么 #328

Arondight · 2021-10-31T11:46:45Z

Arondight
Oct 31, 2021
Maintainer

我想把下面的 9934 做成变量，或者全部删掉改用本地路径，不知道是否可行，之前我想这么做但是卡住了。 @mark9804

src/views/genshin-card.html:35:            src="http://localhost:9934/resources/Version2/module/mys-upper-v2-2.png"
src/views/genshin-card.html:94:                :src="'http://localhost:9934/resources/item/'+data.name+'.png'"
src/views/genshin-card.html:111:                  src="http://localhost:9934/resources/item/lock.png"
src/views/genshin-card.html:121:          src="http://localhost:9934/resources/module/card-new-package.png"
src/views/genshin-card.html:165:            src="http://localhost:9934/resources/module/card-new-middle.png"
src/views/genshin-card.html:176:            src="http://localhost:9934/resources/module/card-new-bottom.png"
src/views/component/card/card.js:40:        "http://localhost:9934/resources/characters/profile/" +
src/views/component/character/character.js:14:        "http://localhost:9934/resources/Version2/character/" +
src/views/component/character/character.js:92:        "http://localhost:9934/resources/Version2/artifact/other/" +
src/views/genshin-artifact.html:14:          src="http://localhost:9934/resources/module/artifact.png"
src/views/genshin-artifact.html:26:            src="http://localhost:9934/resources/item/rarity.png"
src/views/genshin-artifact.html:97:              "http://localhost:9934/resources/Version2/artifact/" +
src/views/genshin-gacha.html:18:          src="http://localhost:9934/resources/gacha/items/background.png"
src/views/genshin-gacha.html:98:              "http://localhost:9934/resources/gacha/items/" +
src/views/genshin-gacha.html:105:              "http://localhost:9934/resources/gacha/items/" +
src/views/genshin-gacha.html:112:              "http://localhost:9934/resources/Version2/wish/character/" +
src/views/genshin-gacha.html:119:              "http://localhost:9934/resources/Version2/wish/weapon/" +
src/views/genshin-gacha.html:128:              `http://localhost:9934/resources/gacha/${type}/` + name + ".png"
src/views/genshin-overview.html:218:              "http://localhost:9934/resources/Version2/info/other/BaseBackground" +
src/views/genshin-overview.html:222:              "http://localhost:9934/resources/Version2/" +
src/views/genshin-overview.html:244:              "http://localhost:9934/resources/Version2/info/other/BaseStar" +
src/views/genshin-overview.html:295:          "http://localhost:9934/resources/Version2/info/image/" + name + ".png"
src/views/genshin-info.html:35:            src="http://localhost:9934/resources/Version2/module/uid-upper-v2-2.png"
src/views/genshin-info.html:90:                :src="'http://localhost:9934/resources/item/'+data.name+'.png'"
src/views/genshin-info.html:107:                  src="http://localhost:9934/resources/item/lock.png"
src/views/genshin-info.html:117:          src="http://localhost:9934/resources/module/card-new-package.png"
src/views/genshin-info.html:161:            src="http://localhost:9934/resources/module/card-new-middle.png"
src/views/genshin-info.html:172:            src="http://localhost:9934/resources/module/card-new-bottom.png"
src/utils/init.js:59:  server(9934);
src/utils/render.js:28:    await page.goto(`http://localhost:9934/src/views/${name}.html`);

Arondight · 2021-10-31T11:50:19Z

Arondight
Oct 31, 2021
Maintainer Author

能全部去掉是最好的，我始终觉得资源都在本地，还要起一个 server ，这种行为很奇怪

0 replies

Arondight · 2021-10-31T11:59:50Z

Arondight
Oct 31, 2021
Maintainer Author

如果我像下面一样改动，整个网页就会读不到数据了。

diff --git a/src/views/component/character/character.js b/src/views/component/character/character.js
index 7865907..1dd177a 100644
--- a/src/views/component/character/character.js
+++ b/src/views/component/character/character.js
@@ -11,7 +11,7 @@ const background = {
   computed: {
     image() {
       return (
-        "http://localhost:9934/resources/Version2/character/" +
+        "../../../../resources/Version2/character/" +
         this.character +
         ".png"
       );
@@ -89,7 +89,7 @@ const emptyBox = {
   computed: {
     image() {
       return (
-        "http://localhost:9934/resources/Version2/artifact/other/" +
+        "../../../../resources/Version2/artifact/other/" +
         this.pos +
         ".png"
       );
diff --git a/src/views/genshin-card.html b/src/views/genshin-card.html
index 3700ffa..7f15410 100644
--- a/src/views/genshin-card.html
+++ b/src/views/genshin-card.html
@@ -32,7 +32,7 @@
       <div>
         <div class="background">
           <img
-            src="http://localhost:9934/resources/Version2/module/mys-upper-v2-2.png"
+            src="../../resources/Version2/module/mys-upper-v2-2.png"
             alt="ERROR"
           />

0 replies

Arondight · 2021-10-31T12:16:56Z

Arondight
Oct 31, 2021
Maintainer Author

算了，我突然想起来，如果没有了 server ，前端就没有调试手段了

0 replies

mark9804 · 2021-10-31T12:21:08Z

mark9804
Oct 31, 2021
Collaborator

我想把下面的 9934 做成变量，或者全部删掉改用本地路径，不知道是否可行

可行，只需要把src="……"里面的……指向本地路径就可以了

需要在data当中添加一个bot根目录的路径（需要是绝对路径），然后通过函数拼接src具体指向的图片

例如，我的bot根目录是/github/Adachi-BOT/，需要读取的图片（相对路径）为resources/Version2/module/mys-upper-v2-2.png，那么这个src可以改写为：

src/views/genshin-card.html:35:            src="/github/Adachi-BOT/resources/Version2/module/mys-upper-v2-2.png"

具体拼接的话，比如写一个函数imageUrlJoin():

<html>
<img :src="imageUrlJoin(botRootDirectory)"/>
<script>
new Vue({
        el: "#app",
        data: {
          …,
          botRootDirectory: "/github/Adachi-BOT/"
        }
function imageUrlJoin(imageURL) { 
   return botRootDirectory + "resources/Version2/module/mys-upper-v2-2.png";
 } 
</script>
</html>

如果没有了 server ，前端就没有调试手段了

WebStorm，live-server都可以做到创建本地server，调试不是问题

9 replies

Arondight Oct 31, 2021
Maintainer Author

我在 vue 里读取了 this.rootdir ，要怎么在 src 中用呢

mark9804 Oct 31, 2021
Collaborator

写一个函数，拼接起来，具体要怎么拼接我JS不太了解，类似于：

html

<img :src="imageUrlJoin(图片相对于rootdir的路径)" />

JS

function imageUrlJoin(imageURL) { 
   return rootdir + "resources/Version2/module/mys-upper-v2-2.png" // rootdir + 图片相对于rootdir的路径;
 }

mark9804 Oct 31, 2021
Collaborator

先洗个澡，目前我刚刚查证到的是：

html支持../，不能显示可能要再检查一下相对路径有没有偏移，如果使用绝对路径肯定能读取到。

HTML img src (image source) with path options (5 examples)

但是为什么深渊网页显示不正常我就不知道了，深渊的网页我照理来说就读取了一个css文件，两个本地字体文件和json文件，剩下的图像资源全是从米游社那边获取的

Arondight Oct 31, 2021
Maintainer Author

研究了大半天没搞明白怎么在 vue 里面读本地 json ，我提了个代码，在 data/config/views.json 下写了个 rootdir ，不过比较尴尬就是不知道咋读到 html

mark9804 Oct 31, 2021
Collaborator

这个不是读取本地json的吗

Adachi-BOT/src/views/genshin-aby.html

Lines 294 to 304 in 3778a4b

    
           methods: { 
        
             readJSON(file, callback) { 
        
               fetch(file).then((res) => { 
        
                 return res.json().then((data) => { 
        
                   callback(data); 
        
                 }); 
        
               }); 
        
             }, 
        
           }, 
        
           mounted() { 
        
             this.readJSON("../../data/record/genshin-aby.json", (res) => {

其实我觉得想拆掉现在的localhost主要还是路径问题得整清楚，比如说究竟是几个../。然后注意一下localhost的根目录在哪里，目前的localhost根目录是Adachi-BOT文件夹

mark9804 · 2021-10-31T13:13:16Z

mark9804
Oct 31, 2021
Collaborator

其实我觉得现在这个项目的这种方式更符合一般网页开发的习惯，一般网页目录是按照这种结构写的

然后写相对路径就是比较自然的src="assets/image/xxx.JPG"

现在这个bot-server的架构是把图片单独分离出去（有点类似于图床的概念），所以用一个本地server使得路径当中不需要大量的../操作，需要返回上一级读取东西让我感觉有点迷惑

0 replies

Arondight · 2021-10-31T14:24:16Z

Arondight
Oct 31, 2021
Maintainer Author

呃，我也用浏览器看了下错误，不是 json 没有读到，是我写的 :src 里面读不到这个变量。

diff --git a/src/views/genshin-artifact.html b/src/views/genshin-artifact.html
index 1ba5026..a2d1d65 100644
--- a/src/views/genshin-artifact.html
+++ b/src/views/genshin-artifact.html
@@ -11,7 +11,7 @@
       <div>
         <img
           class="background"
-          src="http://localhost:9934/resources/module/artifact.png"
+          :src="rootdir + '/resources/module/artifact.png'"
           alt="ERROR"
         />
         <div class="content">
@@ -23,7 +23,7 @@
           </div>
           <img
             class="rarity"
-            src="http://localhost:9934/resources/item/rarity.png"
+            :src="rootdir + '/resources/item/rarity.png'"
             alt="ERROR"
           />
           <img class="image" :src="artifactImage" alt="ERROR" />
@@ -94,7 +94,7 @@
           },
           artifactImage() {
             return (
-              "http://localhost:9934/resources/Version2/artifact/" +
+              this.rootdir + "/resources/Version2/artifact/" +
               this.base.artifactID +
               "/" +
               this.base.slot +
@@ -117,6 +117,9 @@
             this.data = res.data;
             this.mainStat = res.mainStat;
           });
+          this.readJSON("../../data/config/views.json", (res) => {
+            this.rootdir = res.rootdir;
+          });
         },
       });
     </script>

1 reply

Arondight Oct 31, 2021
Maintainer Author

我写成函数居然就可以了

mark9804 · 2021-10-31T14:41:21Z

mark9804
Oct 31, 2021
Collaborator

如果用的是chrome的话，有一个比较成熟的小工作流。Firefox应该也差不多

如果你是mac，按command+shift+C;如果是windows，按ctrl+shift+C？启动元素picker；
鼠标移到需要调试的元素上面，点击；
鼠标移动到元素检查器上面的超链接上悬停，就可以看到对应元素的绝对路径

0 replies

Arondight · 2021-10-31T15:05:42Z

Arondight
Oct 31, 2021
Maintainer Author

还有一步之遥了，现在不明白为什么其他的变量好使，我读到的最后就是 undefined 。 this.rootdir 是正常的，但是 getRoot 和 artifactImage 中的就可能是 undefined

diff --git a/src/utils/init.js b/src/utils/init.js
index 16d02c4..b7d13a4 100644
--- a/src/utils/init.js
+++ b/src/utils/init.js
@@ -24,7 +24,11 @@ async function initDB() {
 async function initBrowser() {
   global.browser = await puppeteer.launch({
     headless: true,
-    args: ["--no-sandbox", "--disable-setuid-sandbox"],
+    args: [
+      "--no-sandbox",
+      "--disable-setuid-sandbox",
+      "--allow-file-access-from-files",
+    ],
   });
 }

diff --git a/src/views/genshin-artifact.html b/src/views/genshin-artifact.html
index 1ba5026..16f7d08 100644
--- a/src/views/genshin-artifact.html
+++ b/src/views/genshin-artifact.html
@@ -11,7 +11,7 @@
       <div>
         <img
           class="background"
-          src="http://localhost:9934/resources/module/artifact.png"
+          :src="getRoot + '/resources/module/artifact.png'"
           alt="ERROR"
         />
         <div class="content">
@@ -23,7 +23,7 @@
           </div>
           <img
             class="rarity"
-            src="http://localhost:9934/resources/item/rarity.png"
+            :src="getRoot + '/resources/item/rarity.png'"
             alt="ERROR"
           />
           <img class="image" :src="artifactImage" alt="ERROR" />
@@ -44,6 +44,9 @@
           mainStat: "",
         },
         computed: {
+          getRoot() {
+            return this.rootdir;
+          },
           Slot() {
             let slotName = ["生之花", "死之羽", "时之沙", "空之杯", "理之冠"];
             return slotName[this.base.slot];
@@ -94,7 +97,8 @@
           },
           artifactImage() {
             return (
-              "http://localhost:9934/resources/Version2/artifact/" +
+              this.rootdir +
+              "/resources/Version2/artifact/" +
               this.base.artifactID +
               "/" +
               this.base.slot +
@@ -117,6 +121,9 @@
             this.data = res.data;
             this.mainStat = res.mainStat;
           });
+          this.readJSON("../../data/config/views.json", (res) => {
+            this.rootdir = res.rootdir;
+          });
         },
       });
     </script>

10 replies

mark9804 Oct 31, 2021
Collaborator

这个我现在不太清楚，之后看看能不能整明白

Arondight Oct 31, 2021
Maintainer Author

除非我们把 json 读取的过程变成同步的，要不然无法解决这个问题，但是 vue 的 mounted 我不知是否是异步的

mark9804 Oct 31, 2021
Collaborator

好像需要指定async才会异步执行？

The mounted() Hook in Vue - Mastering JS

Arondight Oct 31, 2021
Maintainer Author

好像需要指定async才会异步执行？

The mounted() Hook in Vue - Mastering JS

这样子是没有意义的，你在一个异步中做了“同步”，但是你怎么确保最外层的异步也是如此呃，对于 mounted 这些函数来说，只要有一个过程是异步的，那么就不能确保顺序执行，所以我们的 views 都是无法保证使用数据时已经读取完毕的

Arondight Oct 31, 2021
Maintainer Author

归根结底， fetch 是一个异步方法，既然有了一个异步方法，那么就永远无法保证其顺序，如果 fetch 工作了很久，那么或许整个页面加载完数据都不会被读入

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue 网页中的 src 可以是变量么 #328

{{title}}

Replies: 8 comments 20 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Vue 网页中的 src 可以是变量么 #328

Arondight Oct 31, 2021 Maintainer

Replies: 8 comments · 20 replies

Arondight Oct 31, 2021 Maintainer Author

Arondight Oct 31, 2021 Maintainer Author

Arondight Oct 31, 2021 Maintainer Author

mark9804 Oct 31, 2021 Collaborator

Arondight Oct 31, 2021 Maintainer Author

mark9804 Oct 31, 2021 Collaborator

mark9804 Oct 31, 2021 Collaborator

Arondight Oct 31, 2021 Maintainer Author

mark9804 Oct 31, 2021 Collaborator

mark9804 Oct 31, 2021 Collaborator

Arondight Oct 31, 2021 Maintainer Author

Arondight Oct 31, 2021 Maintainer Author

mark9804 Oct 31, 2021 Collaborator

Arondight Oct 31, 2021 Maintainer Author

mark9804 Oct 31, 2021 Collaborator

Arondight Oct 31, 2021 Maintainer Author

mark9804 Oct 31, 2021 Collaborator

Arondight Oct 31, 2021 Maintainer Author

Arondight Oct 31, 2021 Maintainer Author

Arondight
Oct 31, 2021
Maintainer

Replies: 8 comments 20 replies

Arondight
Oct 31, 2021
Maintainer Author

Arondight
Oct 31, 2021
Maintainer Author

Arondight
Oct 31, 2021
Maintainer Author

mark9804
Oct 31, 2021
Collaborator

Arondight Oct 31, 2021
Maintainer Author

mark9804 Oct 31, 2021
Collaborator

mark9804 Oct 31, 2021
Collaborator

Arondight Oct 31, 2021
Maintainer Author

mark9804 Oct 31, 2021
Collaborator

mark9804
Oct 31, 2021
Collaborator

Arondight
Oct 31, 2021
Maintainer Author

Arondight Oct 31, 2021
Maintainer Author

mark9804
Oct 31, 2021
Collaborator

Arondight
Oct 31, 2021
Maintainer Author

mark9804 Oct 31, 2021
Collaborator

Arondight Oct 31, 2021
Maintainer Author

mark9804 Oct 31, 2021
Collaborator

Arondight Oct 31, 2021
Maintainer Author

Arondight Oct 31, 2021
Maintainer Author