feat：svg 生产动态图片

src/pages/Discovery/components/QuickQuestions/index.vue

@@ -8,7 +8,7 @@
         v-for="(item, index) in recommendPostsList" :key="index" @click="sendReply(item)">
 
         <view class="flex flex-row items-center"> 
-          <image class="card-img rounded-14" :src="item.coverPhoto" mode="aspectFill" />
+          <image class="card-img rounded-14" :src="createSvg(item.bgColor, item.iconColor)" />
 
           <view class="ml-8 mt-4 border-box">
             <view class="font-size-12 font-600 color-171717 ellipsis-1">
@@ -41,23 +41,31 @@ const props = defineProps({
       {
         title: "小七孔古桥",
         subTitle: "小七孔古桥",
-        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80"
+        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80",
+        bgColor: '#ECFDF5',
+        iconColor: '#10B981'
       },
       {
         title: "翠谷瀑布",
         subTitle: "翠谷瀑布",
-        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80"
+        coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80",
+        bgColor: '#FFFBEB',
+        iconColor: '#F59E0B'
       },
       {
         title: "鸳鸯湖",
         subTitle: "鸳鸯湖",
         coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80",
+        bgColor: '#EFF6FF',
+        iconColor: '#3B82F6'
         
       },
       {
         title: "卧龙潭",
         subTitle: "卧龙潭",
         coverPhoto: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80",
+        bgColor: '#FFFBEB',
+        iconColor: '#F59E0B'  
       }
     ],
   },
@@ -71,6 +79,24 @@ const sendReply = (item) => {
   }
   uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item.userInputContent);
 };
+
+/// 生成icon
+const createSvg = (bgColor = '#FFFBEB', iconColor = '#F59E0B', size = 40) => {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 40 40" fill="none">
+      <rect width="40" height="40" rx="14" fill="${bgColor}" />
+      <g stroke="${iconColor}" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18.6243 22.3342C18.5648 22.1034 18.4445 21.8929 18.276 21.7244C18.1076 21.5559 17.897 21.4357 17.6663 21.3762L13.5763 20.3215C13.5065 20.3017 13.4451 20.2597 13.4014 20.2018C13.3576 20.1439 13.334 20.0734 13.334 20.0008C13.334 19.9283 13.3576 19.8577 13.4014 19.7999C13.4451 19.742 13.5065 19.7 13.5763 19.6802L17.6663 18.6248C17.8969 18.5654 18.1074 18.4452 18.2759 18.2768C18.4444 18.1085 18.5647 17.8981 18.6243 17.6675L19.679 13.5775C19.6986 13.5074 19.7406 13.4457 19.7985 13.4017C19.8565 13.3578 19.9272 13.334 20 13.334C20.0727 13.334 20.1435 13.3578 20.2014 13.4017C20.2594 13.4457 20.3014 13.5074 20.321 13.5775L21.375 17.6675C21.4345 17.8982 21.5547 18.1087 21.7232 18.2772C21.8917 18.4457 22.1023 18.566 22.333 18.6255L26.423 19.6795C26.4933 19.6989 26.5553 19.7408 26.5995 19.7989C26.6437 19.8569 26.6677 19.9279 26.6677 20.0008C26.6677 20.0738 26.6437 20.1447 26.5995 20.2028C26.5553 20.2608 26.4933 20.3028 26.423 20.3222L22.333 21.3762C22.1023 21.4357 21.8917 21.5559 21.7232 21.7244C21.5547 21.8929 21.4345 22.1034 21.375 22.3342L20.3203 26.4242C20.3007 26.4942 20.2587 26.5559 20.2008 26.5999C20.1428 26.6439 20.072 26.6677 19.9993 26.6677C19.9266 26.6677 19.8558 26.6439 19.7978 26.5999C19.7399 26.5559 19.6979 26.4942 19.6783 26.4242L18.6243 22.3342Z" />
+        <path d="M25.333 14V16.6667" />
+        <path d="M26.6667 15.334H24" />
+        <path d="M14.667 23.334V24.6673" />
+        <path d="M15.3333 24H14" />
+      </g>
+    </svg>
+  `.replace(/\n\s*/g, '').trim()
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`
+}
+
 </script>
 
 <style lang="scss" scoped>

src/pages/Discovery/index.vue

@@ -8,6 +8,8 @@
     :list="discoveryCards" 
     @card-click="cardClick" />
     <QuickQuestions />
+
+
   </view>
 </template>
 
@@ -61,3 +63,8 @@ const cardClick = (item) => {
 };
 
 </script>
+
+<style lang="scss" scoped>
+
+
+</style>