如何高效处理Vue3/Quasar项目中的动态和静态图像路径。

huangapple go评论74阅读模式
英文:

How to efficiently handle a Vue3/Quasar project with dynamic and static image paths

问题

我有一个问题,我认为这个问题并不独特。有时我的夸克星应用程序中,我使用vite/quasar快捷方式来引用资源,如下所示:

<q-carousel-slide :name="2" class="column no-wrap flex-center q-pa-none">
  <q-img src="~assets/imgs/carousel/service-upgrade.jpg" style="height:100%">
    <div class="column no-wrap flex-center" style="width: 100%;height:100%">
      <q-img src="~assets/imgs/carousel/logo-white.png" style="max-width:250px" class="q-mb-lg"></q-img>
      <h1 class="text-h1 text-weight-bolder text-white q-my-none">
        ELECTRICAL UPGRADES
      </h1>
      <h4 class="text-h4 text-weight-light q-mt-xs q-mb-lg text-white">
        NEW WIRING & SERVICE UPGRADES
      </h4>
      <q-btn outline color="white" class="q-my-5 my-btn" label="GET A QUOTE" size="lg" @click="layoutStore.toggleContactUsDrawer"></q-btn>
    </div>
  </q-img>
</q-carousel-slide>

然而,有时候将这些路径放入数组中以缩短我的代码并使用v-for会更容易,如下所示:

<q-tab-panel name="lighting">
  <div class="row q-pa-md block-wrapper text-center q-col-gutter-md" style="margin-bottom:100px;">
    <div v-for="item in imagesArray[0]['lighting']" :key="item.id" class="col-sm-4 col-xs-6">
      <q-img loading="eager" :src="getImageUrl(item.link)" class="rounded-borders text-right" :ratio="16/9" @click="openFullScreenImage(getImageUrl(item.link))"></q-img>
    </div>
  </div>
</q-tab-panel>

上述代码中的相对路径:

const imagesArray = [{
  panels: [
    { id: 1, link: '../assets/imgs/recentwork/panels/panel 1.jpg' },
    { id: 2, link: '../assets/imgs/recentwork/panels/panel 2.jpg' },
    // 其他面板图片的相对路径
  ],
  lighting: [
    { id: 1, link: '../assets/imgs/recentwork/lighting/lighting 13.jpg' },
    { id: 2, link: '../assets/imgs/recentwork/lighting/lighting 22.jpg' },
    // 其他照明图片的相对路径
  ],
  commercial: [
    { id: 1, link: '../assets/imgs/recentwork/commercial/commercial 1.jpg' },
    { id: 2, link: '../assets/imgs/recentwork/commercial/commercial 2.jpg' },
    // 其他商业图片的相对路径
  ],
}]

这种方式会导致我必须维护两个图像文件夹,一个在src文件夹中,另一个在public/assets/imgs文件夹中。这样每次都要复制图像非常麻烦,而且如果需要分别维护这两个文件夹,就更加麻烦了。

如何只使用src资产图像文件夹而不使用public文件夹呢?这个问题也很烦人,有没有解决方法?

英文:

I have a problem that I would not think is unique. There are times my quasar application I use the vite/quasar shortcut for assets as below:

&lt;q-carousel-slide :name=&quot;2&quot; class=&quot;column no-wrap flex-center q-pa-none&quot;&gt;
  &lt;q-img src=&quot;~assets/imgs/carousel/service-upgrade.jpg&quot; style=&quot;height:100%&quot;&gt;
    &lt;div class=&quot;column no-wrap flex-center&quot; style=&quot;width: 100%;height:100%&quot;&gt;
      &lt;q-img src=&quot;~assets/imgs/carousel/logo-white.png&quot; style=&quot;max-width:250px&quot; class=&quot;q-mb-lg&quot;&gt;&lt;/q-img&gt;
      &lt;h1 class=&quot;text-h1 text-weight-bolder text-white q-my-none&quot;&gt;
        ELECTRICAL UPGRADES
      &lt;/h1&gt;
      &lt;h4 class=&quot;text-h4 text-weight-light q-mt-xs q-mb-lg text-white&quot;&gt;
        NEW WIRING &amp; SERVICE UPGRADES
      &lt;/h4&gt;
      &lt;q-btn outline color=&quot;white&quot; class=&quot;q-my-5 my-btn&quot; label=&quot;GET A QUOTE&quot; size=&quot;lg&quot; @click=&quot;layoutStore.toggleContactUsDrawer&quot;/&gt;
    &lt;/div&gt;
  &lt;/q-img&gt;
&lt;/q-carousel-slide&gt;

However, there are also times where its just easier to put these paths in an array to shorten my code with a v-for such as below:

        &lt;q-tab-panel name=&quot;lighting&quot;&gt;
          &lt;div class=&quot;row q-pa-md block-wrapper text-center q-col-gutter-md&quot; style=&quot;margin-bottom:100px;&quot;&gt;
            &lt;div v-for=&quot;item in imagesArray[0][&#39;lighting&#39;]&quot; :key=&quot;item.id&quot; class=&quot;col-sm-4 col-xs-6&quot;&gt;
              &lt;q-img loading=&quot;eager&quot; :src=&quot;getImageUrl(item.link)&quot; class=&quot;rounded-borders text-right&quot; :ratio=&quot;16/9&quot; @click=&quot;openFullScreenImage(getImageUrl(item.link))&quot;/&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/q-tab-panel&gt;

Script with relative paths for code above:

  const imagesArray = [{
panels:[
    { id: 1, link: &#39;../assets/imgs/recentwork/panels/panel 1.jpg&#39;},
    { id: 2, link: &#39;../assets/imgs/recentwork/panels/panel 2.jpg&#39;},
    { id: 3, link: &#39;../assets/imgs/recentwork/panels/panel 3.jpg&#39;},
    { id: 4, link: &#39;../assets/imgs/recentwork/panels/panel 4.jpg&#39;},
    { id: 5, link: &#39;../assets/imgs/recentwork/panels/panel 5.jpg&#39;},
    { id: 6, link: &#39;../assets/imgs/recentwork/panels/panel 6.jpg&#39;},
    { id: 7, link: &#39;../assets/imgs/recentwork/panels/panel 7.jpg&#39;},],
lighting: [
    { id: 1, link: &#39;../assets/imgs/recentwork/lighting/lighting 13.jpg&#39;},
    { id: 2, link: &#39;../assets/imgs/recentwork/lighting/lighting 22.jpg&#39;},
    { id: 3, link: &#39;../assets/imgs/recentwork/lighting/lighting 26.jpg&#39;},
    { id: 4, link: &#39;../assets/imgs/recentwork/lighting/lighting 24.jpg&#39;},
    { id: 5, link: &#39;../assets/imgs/recentwork/lighting/lighting 28.jpg&#39;},
    { id: 6, link: &#39;../assets/imgs/recentwork/lighting/lighting 17.jpg&#39;},
    { id: 7, link: &#39;../assets/imgs/recentwork/lighting/lighting 27.jpg&#39;},
    { id: 8, link: &#39;../assets/imgs/recentwork/lighting/lighting 30.jpg&#39;},
    { id: 9, link: &#39;../assets/imgs/recentwork/lighting/lighting 12.jpg&#39;},
],    
commercial: [
    { id: 1, link: &#39;../assets/imgs/recentwork/commercial/commercial 1.jpg&#39;},
    { id: 2, link: &#39;../assets/imgs/recentwork/commercial/commercial 2.jpg&#39;},
    { id: 3, link: &#39;../assets/imgs/recentwork/commercial/commercial 3.jpg&#39;},
    { id: 4, link: &#39;../assets/imgs/recentwork/commercial/commercial 4.jpg&#39;},
    { id: 5, link: &#39;../assets/imgs/recentwork/commercial/commercial 5.jpg&#39;},
    { id: 6, link: &#39;../assets/imgs/recentwork/commercial/commercial 6.jpg&#39;},
    { id: 7, link: &#39;../assets/imgs/recentwork/commercial/commercial 7.jpg&#39;},
    { id: 8, link: &#39;../assets/imgs/recentwork/commercial/commercial 8.jpg&#39;},
    { id: 9, link: &#39;../assets/imgs/recentwork/commercial/commercial 9.jpg&#39;},
],

}]

When I do it this way I find myself having to keep two folders of images. One in the src folder then I also have to maintain an identical folder in the public/assets/imgs folder. So this is a pain to keep recopying over the images but it is even more of a pain if i were to have to maintain both seperately as well.

How can you just use the src assets img folder for everything rather than using this public one which is quite annoying to maintain as well?

答案1

得分: 0

非公开资产需要导入。在使用 Vite 时,可以使用 new URL(url, import.meta.url) 来完成这个操作。您只需要将数组更改为以下方式:

panels:[
    { id: 1, link: new URL('.. /assets/imgs/recentwork/panels/panel 1.jpg', import.meta.url).href },
    { id: 2, link: new URL('.. /assets/imgs/recentwork/panels/panel 2.jpg', import.meta.url).href },
    { id: 3, link: new URL('.. /assets/imgs/recentwork/panels/panel 3.jpg', import.meta.url).href },
    ...
英文:

non-public assets need to be imported. Using vite, this can be done with new URL(url, import.meta.url). You would just change your array to be along the lines of:

panels:[
    { id: 1, link: new URL(&#39;../assets/imgs/recentwork/panels/panel 1.jpg&#39;, import.meta.url).href },
    { id: 2, link: new URL(&#39;../assets/imgs/recentwork/panels/panel 2.jpg&#39;, import.meta.url).href },
    { id: 3, link: new URL(&#39;../assets/imgs/recentwork/panels/panel 3.jpg&#39;, import.meta.url).href },
    ...

huangapple
  • 本文由 发表于 2023年7月20日 19:18:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/76729316.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定